你可以把import前面的双斜杠去掉试试
就是模版名称描述的了
比如html5，微信小程序
看名字就大概知道
其实没有实质区别，只是初始文件和目录结构有各模式区别
项目都是可以互转的
1、模板不能修改，选好了模板，用户无法对其进行独立、随意地编辑，无法自定义模板，共享类模板设计出来的页面，往往是一个呆板而雷同的页面，让人感觉死色沉沉。
2、功能简单且没有个性，在页面、风格、功能、维护管理等方面的功能得不到保障。
3、网站自身服务器的约束性，由于管理和维护工作必须在服务商的服务器上完成，因此用户的一些网站也被牢牢捆绑在该公司的服务器上，用户不可以自由地移植到别的服务器上，用户就失去了自由选择的权利。
模板建站和智能建站有啥区别？反正不是用技术原生建站就是了 这样的产品可定制性太低 原生建站就是任你行
软件定制开发主要是功能上特意为某一个客户专门定制，价格是比套用模版要高一些的，好比定制就是打车，套用模版是做公交，价格是有差别的，软件定制时间上也相差甚大，人力成本自然就上去了。模板开发是根据用户现有模板进行报价，功能已经成型，只需把信息改成客户的信息即可用，模板类软件开发简单，所以报价比较低。吉加软件网页是专门做定制开发的，定制的和模板做的体验感完全不一样的，望采纳。
1. 这样自助开发的平台不少，体验比较好的有叮铛应用，小程序和App 在线制作和运营都可实现
2. 采取的模式是模板化+组件化+细节调整，因此自定义程度很高
3. 模板也包括多个行业，比如电商、社区、付费内容等等
快速入门uni-app，把想看的网站变APP。
下载hbuildx，这里官方提供了几种安装包，有完全版，还有beta版，还有标准版，随便下一个吧，或者直接下载标准版的，因为它最小。
1.创建uni-app，直接选择uni-app 默认模版（hello-app项目可以拿来看看，不建议开发时使用，wap2app是针对wap转app端的，5+app 使用htmlplus，uni-app对html5+ 进行了整合，并建议直接使用uni-app即可，小程序那就是小程序咯，让我们心大一点，练习多端吧）
关于目录结构，可以在开放规范中看到或者直接创建一个heoll 模版项目看看，各个文件夹之间的关系和作用都比较明确，对于uni-app的配置文件需要仔细看看。
2.配置
manifest.json 这个文件在移动应用中屡见不鲜，在uni-app也有关这个文件的解释
文件是应用的配置文件，用于指定应用的名称、图标、权限等。个人觉得就是映射，在不同的环境下具体的左右略有不同，比如webpack 中是指向原始文件的映射关系等。
uni-app 中有一些自定义属性比如appid，是用来标识云端编译用的。
在ide中打开这个文件，会有一个新的视图，是中文的，如果你要详细了解关系，可以到文件目录下打开这个文件查看或者直接点击最下方的源码视图进行查看。另外有一些配置可能找不到，但是在源码视图中可以找到，还有一些配置，默认项目是没有的，比如超时时间的设置。
启动图：配置.9 图片制作流程
打开下载工具 draw9patch.bat（这里我没有打开，处理文件报错，不去深究了，看第二种方法，通过as，打开as）
新建一个as项目，找一个png图片丢到as中，右键创建.9 图片
打开这个文件，点击鼠标坐标在边上即可调整拉伸区域与内容区域，类似下面这种，关于四个边的概念大家去看下文档，类似下面这种内容居中的图片（一般都是这样），拉伸的时候左右两侧和上下两侧拉伸空白，在操作的时候需要先control选择拉伸区域，然后再shift 去掉一部分的拉伸器区域~
像这样搞定后就行了，然后根据uni-app的规定指定图片大小上传。
另外：此用法只适用与android，ios就一个个上传吧。
查看json源码，其中有一项为第三方sdk，配置后可使用第三方sdk的集成，一些常用的第三方sdk已集成，比如授权登录、分享、支付等。
更多的配置自行看吧，再此不表。
第二个配置文件 pages.json 看名字就看的出来是配置页面用的
关于pages，新增的页面需要追到到page文件中，定义全局样式后，每个page可以单独的配置其style。
另外在pages目录下新增页面的时候，配置文件中会自动追加和删除相关page。
其中关于导航栏，官方建议使用原生又uni-app提供的原生导航，如果自定义导航，可能会有很多问题，
尤其是前端导航与下拉刷新之间的冲突。
关于subNVue，这里解释一下nvue，刚开始看的时候我也有点懵，啥意思，vue提供的新扩展吗？并不是，nvue 是与native.js 结合的一种组件规范，它可以直接调用原生代码中的api，官方建议是只是在有特定需求的地方使用nvue，
而这里提到的subNVue 指的是通过nvue 创建的一种子窗口组件，它使用的是原生渲染的方式，通过窗口进行的实现，在做一些浮动的时候，比如遮罩蒙板，视频弹幕这种的时候用得上。
所以使用nvue的时候想要调试必须在终端环境，模拟器或者微信工具。如果运行之前应该有记录，这里不表。
多页面通讯：有两种，官方推荐新的方式，注册监听
uni.$on('page-popup', (data) => { vm.title = data.title; vm.content = data.content; }) uni.$emit('page-popup', { title: '我是一个title', content: '我试data content'}); 另，官方提供了一些建议：所以不要滥用它为好
还有就是关于subNVue的style 并不是我们平时理解的所有样式表，它自有规则，具体请看官网，其中有几个重要的属性，比如type、position、dock。
conditon：
指定页面，也就说不要不用每次启动都要重新点一遍来看，只需要指定我们当前调试的页面即可，这个配置只在开发时候生效，正式编译打包后不起作用。
"condition":{ "current":0, "list":[ { "name":"me", "path":"pages/me/me", "query":"" } ] }
分包：这里是针对小程序的，因为小程序对包的大小有限制，所以在上传小程序的时候需要对包进行管理，小程序允许分包的存在。
另外在配置这个文档中还有package.json ，vue-config.json , uni.scss 的介绍
package.json ：因为uni-app 是基于vue的，在编译时又是依赖与node的，所以可以添加打包文件，若是通过cli创建的项目，必须自己进行配置，对于通过ide创建的项目，则看需求。
vue.config.js 类似webpack它们都有配置文件或直接通过cli进行打包或编译。其中有一些uni-app不支持，知晓即可。
对于内置的scss，可以进行应用与修改，其中的变量通过在style标签中指定lang 即可进行引用。
另外日志什么的，有的集中类型不多说了，在HBuilder里可以使用代码块，可以快速补全。
生命周期：
这个标题标红，个人认为生命周期对于一个框架来说非常的重要。
1.应用生命周期：最后一个监听，比如之前说的nvue和vue之间交互就用它。
应用生命周期监听一般都在APP.VUE 中进行注册监听，作为app的主入口。
应用启动会，监听的回调执行相关逻辑。
h5 打印效果如下：
2.页面监听函数
相比应用监听函数，页面监听函数使用的是最多的，uni-app 提供了很多内置钩子，不截图了，比较多。
这里的onLoad 和onShow 给我感觉特别好，相比apicloud 每次新的页面打开，除非设置强制刷新，否则会进行缓存，要么每次打开的时候发送消息事件，一个入口还好，
如果多个入口，会特别痛苦，除非自己再定义一个工具类什么，而uni-app的这2个钩子，可以说完美的避开了这些琐事，再次显示的时候，我们可以做一些其他事情了。
另外对于小程序中的一些固定导航按钮，同样有他们的钩子
并且，页面滚动不要自己再去监听dom什么的了，直接提供了钩子，方便多了。
还有，对于原生搜索框，也就是之前提到的searchInput 也提供了回调
关于nvue的声明周期：基本上与vue保持一致性。
关于各个页面之间通讯：
使用uni-app 提供的事件自定义监听机制可以对其进行监听。（因为是uni所以只能是终端测试）。
全局监听提供了4个函数：
uni.$emit(eventName,OBJECT)uni.$on(eventName,callback)uni.$once(eventName,callback)uni.$off([eventName, callback])// 基本上vue、jqeruy 还有一些第三方库都有类似的函数
关注吧
uni-app详解一、介绍uni-app 是一个使用 Vue.js(opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
uni-app底层集成了native技术，就是h5+引擎，能调用手机原生api，所以uniapp能开发接近原生性能的app，这是js引擎部分；它是双引擎，渲染又是独立一个独立引擎。这个渲染引擎又分为nvue渲染和webview渲染，nvue其实就是集成的weex，webview这个有了解的应该知道它的内核是webkit。
二、uni-app和vue的区别：uni-app可以通过打包实现一套代码多端运行，而vue不行。uni-app有自动的框架预载，加载页面的速度更快，vue没有。uniapp使用小程序的标签，vue使用web端的标签。uni不支持vue-router，使用自带的路由。三、uni-app优点：uni-app是一套可以适用多端的开源框架，一套代码可以同时生成ios，Android，H5，微信小程序，支付宝小程序，百度小程序等。uni-app对前端开发人员比较友好，学习成本比较低，首先uni-app是基于vue.js的。其次封装的组件和微信小程序的组件一样。uni-app使用HBX进行开发，HBX对于vue语法等支持可以说是比较完备了。以下内容分别使用Vue CLI 和 云开发平台教您从头开始构建自己的应用。
Vue-CLI 快速搭建项目一、搭建本地开发环境Vue CLI 4.x 需要Node.js 8.9 或更高版本（推荐v10+）。您可以使用n、nvm或nvm-windows 在同一台机器上管理多个版本的Node。 要了解如何安装 Node.js，参阅nodejs.org。 如果你不确定系统中正在运行的 Node.js 版本是什么，请在终端窗口中运行node -v。npm 包管理器 因为我们通常都会使用Hexo 提供的脚手架搭建项目结构，所以要下载并安装 npm 包。本指南使用 npm 客户端命令行界面，该界面默认安装在 Node.js。要检查你是否安装了 npm 客户端，请在终端窗口中运行 npm -v 。你可以使用 Vue CLI 来创建项目，生成应用和库代码，以及执行各种持续开发任务，比如测试、打包和部署。npm install -g @vue/cli@4二、创建uni-app使用正式版（对应HBuilderX最新正式版）
vue create -p dcloudio/uni-preset-vue my-project使用alpha版（对应HBuilderX最新alpha版）
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project使用Vue3/Vite版
1.创建以 javascript 开发的工程（如命令行创建失败，请直接访问 gitee(opens new window)下载模板）
npx degit dcloudio/uni-preset-vue#vite my-vue3-project
2.创建以 typescript 开发的工程（如命令行创建失败，请直接访问 gitee(opens new window)下载模板）
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
此时，会提示选择项目模板（使用Vue3/Vite版不会提示，目前只支持创建默认模板），初次体验建议选择 hello uni-app 项目模板，如下所示：
三、启动应用服务器进入工作区目录，并启动这个应用。
cd my-projectyarn serve
hexo server命令会构建本应用、启动开发服务器、监听源文件，并且当那些文件发生变化时重新构建本应用，
也会打开浏览器，并访问 :8080/ 。
你会发现本应用正运行在浏览器中。
参考文献：
云平台一键部署uni-app作为uni-app开发者的你，云开发平台为你提供了一站式，全云端的开发平台，让你可以打开浏览器就完成开发，调试，上线，同时云开发平台底层调用的是阿里云集团Serverless产品，可以实现低门槛开发，部署，调试，降低开发上手成本，让uni-app框架可以一键快速部署！
一、创建环境想要一键部署uni-app，需要以下账号和服务：
Github账号 ()，阿里云账号，并使用阿里云账号登录云开发平台 ()，为保证最好的使用体验，请使用Chrome浏览器。开通OSS服务。未开通阿里云OSS的用户，点击链接 (?code=oss)开通OSS服务。OSS开通免费，有一定的免费额度，超过额度之后按量付费。二、创建uni-app应用创建前端应用。打开快速开始 ，找到uni-app点击创建「创建应用」按钮。云资源访问授权。如果您之前没有使用过云开发平台，会出现云资源授权管理的选项，往下拉出现直至同意授权的字样，点击「同意授权」后出现授权成功，点击进入「下一步」。绑定Github账号。授权完成后选择来源仓库为Github，按照提示点击去绑定，绑定GitHub帐号，登录后并点击Authorize Aliyunworkben允许云开发平台构建、发布你的GitHub代码为可访问的网站。选择fork好的“uni-app”代码仓库。选择第一步中的代码仓库，主干分支，并点击下一步。主干分支一般指的是代码的master或main等分支。填写基本信息，完成创建。填写基本信息并点击「完成」。成功后进入到应用详情和部署界面。
三、在日常环境部署一键进行应用部署。在应用详情页面点击日常环境的「部署」按钮进行一键部署，部署状态变成绿色已部署以后可以点击访问部署网站查看效果。访问uni-app网站。日常环境的测试域名也是可以访问的，点击访问已部署网站按钮会出现一个弹出，点击弹出上的立即访问就能够访问已经部署好的站点了。在部署完成后，可以继续本地编码，并将代码push到应用的“基本信息”中对应的代码仓库内。多端应用一键上云！现如今身处在随时会到来新状况的大环境下，做好自己便是在不安中树立了一颗屹立不倒的松树。作为开发者们每天都要面临新的代码、应用，保持随时学习的状态和能力也可让自己多一份安稳。阿里云云开发平台的初衷是为每一位开发者提供免费、便捷的云上研发工作平台，通过学习与实操演练两种模式，从入门到精通快速上手Serverless和云开发技术。0门槛全云端开发、随时随地在线协同、业界领先Serverless架构、行业应用一件初始化等特性也通过每次的实践伴随着你、我。
云原生应用、主机应用部署、前端应用部署三大板块的提供，供开发者们找到最合适自己神器，令开发工作事半功倍。其中满足IoT语音技能、小程序、H5应用等开发者低门槛应用开发的需求；也支持代码编译部署到ECS主机服务器的场景，帮助用户管理传统主机应用的能力；让前后端应用能够更高效地协同。平台将持续与开发者一起共同成长，帮忙开发者更好、更快以及更低成本的开发，多端的应用更加快速的上云。
今天我们做一下设置页面和登录页面的布局，因为这个系统如果不登录的话，几乎是没有任何权限可以操作的。
再说明一点：现在的APP普遍要求做到一打开后不需要任何操作就能看到界面和基本页面，哪怕页面是空的，用户在操作时再弹出提示要登录才能继续。说这样的要求是为了用户体验；
就比如银行APP这样要求安全的软件，也是在打开后不需要登录就可以看到一些东西，等具体操作时，才会要求登录。
如果不这样做，你把APP设计成一打开就要求登录，多半是在应用市场和小程序后台审核不过去的。
登录和设计页面大概样式
上面就是“登录”和“设置”页面的大概布局，以后有需要我们会随时改动。为了测试方便，我在登录下面做了三个为了调试而设置的快速登录按钮，按一下就会以相应身份登录。
这两个页面的代码如下（我尽量把注释写全）：
登录页面：
<template> <view><!--每个uniapp的vue文件都要至少有一个view--> <view class="input-box"><!--标签的class属性控制着它的样子，在下面的style里定义的--><view class="input-item"><view class="input-label">手机号</view><view class="input-body"><input v-model="phone" maxlength="11" type="text" placeholder="请输入手机号" class="input"><button :disabled="!isCanSendCode" class="btn-code">{{sendMsg}}</button><!--uniapp中标签属性前面带:号时，后面引号里代表是VUE的变量名--><!--如果不是标签里想引用VUE变量，要用{{变量名}}来引用--></view></view><view class="input-item"><view class="input-label">验证码</view><view class="input-body"><input v-model="vCode" type="text" style="margin-right: 50upx;" placeholder="请输入验证码" maxlength="20" class="input" /><!--上面这个v-model是双向绑定，变量改变时这里的值变，这里的值变时，变时内容也会变--></view></view> </view><!--如果只有一两个标签的样式需要改变，而我又懒，就直接在标签里用style来指定样式，不需要在下面去定义--> <button class="button" style="background-color: #08B6F2;color: #fff;">登录</button> <button class="button" type="default" style="margin-top:30rpx;color:#999;">返回首页</button> <view style="margin-top:50rpx;">调试账号登录<button class="button" type="warn">老赵1，管理员</button><button class="button" type="default">老赵2，员工</button><button class="button" type="primary">老赵3，业主</button> </view> </view></template><script> export default { data() {return {/*VUE的变量们，这里的变量可以和上面模板里绑定，然后会互动*/sendMsg: "发送验证码",isCanSendCode: true,phone: "",vCode: ""} }, methods: { /*VUE事件函数放这里，因为我们还没做逻辑，所以这里是空的。*/ } }</script><style lang="scss"> /*页面样式类的存放地方*/ button::after { border: none; } .input-box { padding: 50upx; font-size: 30upx; .input-item {display: flex;background: white;border-bottom: 1upx solid #eeeeee;line-height: 100upx;height: 100upx;.input-label {width: 150upx;}.input-body {position: relative;height: 100upx;width: calc(100% - 150upx);.input {line-height: 100upx;height: 100upx;position: relative;font-size: 28upx;width: 300rpx;}.eye {position: absolute;height: 50upx;width: 50upx;right: 0;top: 50%;transform: translateY(-50%);}.btn-code {position: absolute;right: 0upx;top: 50%;transform: translateY(-50%);background: none;color: #205592;width: 160upx;font-size: 24upx;box-sizing: border-box;text-align: right;padding: 0;height: 100upx;line-height: 100upx;}} } .select {padding-top: 40upx;display: flex;justify-content: space-between;color: #003B67; } } .button { margin: 0 30upx; border-radius: 50upx; line-height: 80upx; height: 80upx; font-size: 32upx; }</style>
注意一下rpx这个单位，一般我们在做HTML、CSS时，都是用px，1px就代表1个显示器上的物理像素，在uniapp中也是这样1px等于一个物理像素，但是手机的分辨率是很多样的，因此我们不能方便地控制大小，所以才有了rpx这个单位，这个单位会把屏幕总宽度当成750，当屏幕宽度不足750的时候，1rpx会小于1像素，屏幕宽度大于750的时候，1rpx会大于1个像素。1rpx=屏幕宽度物理像素数量/750。
关键的地方我在上面用注释写了一下，要是都解释一下的话，估计得好几万字，有不清楚的留言吧。
下面是设置页面的代码：
<template> <view> <view class="set_header"><view class="shd_topBar"><view class="avatar"><image src="../../static/avatar.png"></image></view><view class="title"><view class="nickName">老赵和他的</view><view><uni-tag text="管理员" type="error" :circle="true" size="small"></uni-tag></view></view><view class="setBtn"><uni-icons type="gear-filled" color="#fff" size="26"></uni-icons></view></view><view class="iCounter"><view class="item"><view>999</view><view>发布</view></view><view class="item"><view>888</view><view>解决</view></view><view class="item"><view>999天</view><view>任职</view></view></view> </view><uni-list><uni-list-item class="listItem" title="这里能有些什么功能呢？" :show-badge="true" badge-text="12"></uni-list-item><uni-list-item class="listItem" title="我们以后用的时候再设计" :show-switch="true"></uni-list-item> </uni-list> </view></template><script> export default { data() {return {} }, onShow() {console.log(this.getLoginMsg()); }, methods: { } }</script><style> .listItem{background-color: #fafafa; } .set_header { padding:50rpx; margin: 30rpx; border-radius: 20rpx; background-image: linear-gradient(to right bottom, #0ba360 0%, #3cba92 100%);/*上面这一行是给头部加渐变色的CSS，有一个网站专门提供这个代码，挺有意思的*/ height: 200rpx; } .shd_topBar{ display: flex; } .shd_topBar .avatar{ width:100rpx; height:100rpx; overflow: hidden; } .shd_topBar .avatar image{ width:100rpx; height:100rpx; } .shd_topBar .title{ flex:1; padding:5rpx 0 0 30rpx; } .shd_topBar .title .nickName{ color:#fff; font-weight: bold; text-shadow: 1rpx 1rpx 1rpx #999; } .shd_topBar .setBtn{ width:60rpx; height:100rpx; overflow: hidden; line-height: 100rpx; } .iCounter{ display: flex; margin-top:50rpx; } .iCounter .item{ flex:1; text-align: center; color:#fff; font-size:8rpx; }</style>
**这个页面使用了uni-tag组件，别忘了安装一下。
一个APP通常由很多个页面组件，那么他们之间肯定要调用很多相同的方法，我们不能每个页都重写一遍所有方法，所以我们要找一个定义一次就可以在整个APP、内调用的办法，那就是在main.js里定义。我写了一个检查登录状态的函数，那么现在我的main.js代码就是这样的了：
import Vue from 'vue'import App from './App'Vue.config.productionTip = false/** * 检查是否登录的全局方法 * ========================= * 如果登录了，返回一个对象，里面有pid * 这个函数不验证具体的身份是否正常。 * 它只是记录了登录信息，具体在调用API时在服务端会对这些信息进行验证。 * 所以这里不用操心是否正确。 */Vue.prototype.getLoginMsg = function(){ var loginMsg = {}; //定义一个空对象 loginMsg.pid = uni.getStorageSync("login_pid"); //用同步的方法在磁盘中读取保存的pid if(loginMsg.pid.length < 1){ //login_pid是空的，就是没登录，直接返回false，连调用API的机会都没有。 return false; } loginMsg.userPhone = uni.getStorageSync("login_userPhone"); //登录手机 loginMsg.vCode = uni.getStorageSync("login_vCode"); //md5后的验证码 loginMsg.startDate = uni.getStorageSync("login_startDate"); //登录的日期 loginMsg.Identity = uni.getStorageSync("login_Identity"); //用户身份（管理员、员工、业主） console.log(loginMsg); //调用试用的，这句代码是在控制台输出东西。 return loginMsg;}App.mpType = 'app'const app = new Vue({...App})app.$mount()
大概就是这样，先做个样子，还没做逻辑功能。以后用到什么功能再加。
