使用uni-app开发微信小程序的实现

　　

　　

　　

9月份,开始开发微信小程序,也曾调研过<代码> wepy <代码>//<代码> mpvue> uni-app> uni-app> 请求接口,引用<代码> color-ui> 选项卡> 　　

　　

<代码> uni-app> Vue。js代码开发所有前端应用的框架,开发者编写一套代码,可发布到iOS <代码> ,<代码> Android ,<代码> H5> 　　

即使不跨端,<代码> uni-app> 　　

好处如图:

　　

　　

我使用<代码> uni-app> 　　

　　<李> uni-app框架使用的开发工具HBuilderX, HBuilderX内置相关环境,开箱即用,无需配置nodejs,需要什么插件可直接下载,测试,打包,发布特别方便。 　　<李> uni-app采用Vue.js语法,基本支持vue大部分语法(vue的动态组件组件不支持)。 　　<李> PC端使用vue封装的一些js方法,以及建构思想,可直接移植到uni-app中,比如:本人PC项目中api接口js文件,可直接复制到小程序框架api文件夹中(PS: api文件夹维护后端请求路径) 　　<李> uni-app周边生态丰富,插件市场可用的组件特别多,也可使用vue语法自己封装一些组件。<代码>
　　李 　　

　　

　　

　　<李> <代码> HBuilderX> 　　<李> <代码> HBuilderX> uni-app> 　　<李> <代码> HBuilderX> 工具> 插件安装 　　

　　

　　

　　

首先我们通过<代码> HBuilderx> 文件> 项目> uni-app> 　　

　　

接着我根据自己的项目需求,以及为了与vue <代码>的<代码>电脑> 　　

具体代码可参考GitHub: weixin-start

　　

　　 　　 　　+ - api -(页面接口路径) 　　| +——login.js 　　| +——tools.js 　　+——colorui (color-ui样式) 　　+——常见(通用的js方法) 　　+——组件(通用的组件) 　　+——页面(主要页面) 　　+——服务——(通用的服务) 　　| +——auth.service。js(主要封装了一些保存用户的令牌方法) 　　| +——config.service。js(存放全局通用的变量) 　　| +——request.service。js(封装了uni.request的方法) 　　+——静态(静态文件) 　　+——解包(在小程序模拟器运行的文件) 　　+——App.vue(应用配置,用来配置应用全局样式以及监听) 　　+——主要。js (Vue初始化入口文件) 　　+ -清单。json(配置应用名称,appid,标志,版本等打包信息) 　　+ - - -页面。json(配置页面路,由导航条,选项卡等页面类信息) 　　+ - - -大学。scss——(这里是uni-app内置的常用样式变量) 　　 　　

主要文件介绍:

　　

　　<李> api文件夹中存放的是各个页面的请求路径,引入request.service.js暴露出来的api,李 　　<李> colorui使用了color-ui样式,个人认为样式非常好看,非常感谢,详情:color-ui李 　　<李>普遍存放全局通用的js方法 　　<李>组件存放全局组件,包括uni-ui以及自己封装的组件 　　<李>页面主要页面,其中页文件夹中索引文件中可布局底部的选项卡页面,通过v如果判断显示不同的选项卡页 　　<李>服务通用的服务文件(我不知道这种描述是否准确,原来用的Angular4,角中服务概念对我有一定的影响) 　　

使用uni-app开发微信小程序的实现