热点资讯软件开发 使用uni-app开导微信小要领的已矣
绪言
9月份，启动开导微信小要领，曾经调研过wepy/mpvue，琢磨到后期跨端的需求，最终聘用使用了uni-app，本文主要先容如何使用uni-app搭建小要领姿色，以及我方对框架的补充，包括封装request接口，援用color-ui,动态确立底部tab页等，确定见下文
uni-app 先容（官网）
uni-app是一个使用Vue.js 开导总计前端诈欺的框架，开导者编写一套代码，可发布到iOS、Android、H5、以及各式小要领（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。
即使不跨端，uni-app同期亦然更好的小要领开导框架。详见评测
平允如图：
我使用uni-app框架主要用来开导微信小要领，我使用经由中嗅觉的平允是：
uni-app框架使用的开导器具 HBuilderX，HBuilderX 内置关系环境，开箱即用，无需配置nodejs， 需要什么插件可径直下载，测试、打包、发布稀奇便捷。 uni-app继承Vue.js语法，基本缓助vue大部分语法（vue的动态组件component不缓助）。 PC端使用vue封装的一些js措施，以及建构念念想，可径直移植到uni-app中，比如：本东谈主pc姿色中api接口js文献，可径直复制到小要领框架api文献夹中（PS：api文献夹顾惜后端肯求旅途） uni-app 控制生态丰富，插件商场可用的组件稀奇多，也可使用vue语法我方封装一些组件。开导器具（HBuilderX）
HBuilderX: 官网IDE下载地址; HBuilderX是通用的前端开导器具，但为uni-app作念了稀奇强化。 HBuilderX提供了一些插件，可径直下载装配，具体如下图： 器具 > 插件装配
姿色结构
最初咱们通过HBuilderx > 文献 > 姿色，聘用uni-app姿色，模板我聘用的是默许模板，天然你也可聘用其他模板，接着证实创建，要是你聘用的是默许模板，此时你的文献夹应该如下图：
接着我把柄我方的姿色需求，以及为了与vue的pc姿色结构保执一下，划分添加如下文献夹
具体代码可参考GitHub:weixin-start
主要文献先容：
api 文献夹中存放的是各个页面的肯求旅途，引入request.service.js暴表现来的api， colorui 使用了color-ui形貌，个东谈主以为形貌相等顺眼，相等感谢，确定：color-ui common 存放全局通用的js措施 components 存放全局组件，包括uni-ui以及我方封装的组件 pages 主要页面， 其中pages文献夹中 index文献中可布局底部的tab页面，通过v-if判断自大不同的tab页 services 通用的工作文献（我不知谈这种描画是否准确，蓝本用的Angular4，Angular中工作主张对我有一定的影响） auth.service.js 通过使用uni.setStorageSync简便封装了一些保存用户的token措施 config.service.js 保存全局的变量 举例：apiUrl肯求接口的IP, storage_key 是token 的键值，全局援用的变量齐可界说在这个文献内，后期要是需要调动，只需要修改这个文献中对用的值 request.service.js 使用Promise对uni.request进行封装，将get、post、delete肯求方式暴表现来，软件开发公司在api文献夹中援用这个文献即可使用get、post、delete措施 static 静态文献，我主要用来放图片 unpackage (在小要领模拟器运行的文献) App 诈欺配置，用来配置App全局形貌以及监听如何自界说底部tab导航栏
本东谈主姿色中需要把柄不同的变装自大不同的底图tab页，那么蓝本在pages.json确立的tab页，不够生动，也不好延迟，因此自界说tab页，具体如下
在pages文献夹中，新建一个index文献夹并创建一个index.vue页面，在这个页面可布局底部tab, 把柄点击不同的tab自大对应的tab页， 如图：
瞩目：
要是每个tab点击是切换不同的view，这个就特殊于单页诈欺了，当页面比拟复杂时，切换经由可能存在卡。是以使用自界说组件的tabbar就尽量幸免太多复杂页面。
天然原生tabbar固然体验好，但自界说性不及。这个需要开导者把柄我方的需求来均衡聘用。
如何使用colorui
引入
ColorUI是一个css库！！！在你引入形貌后不错把柄class来调用组件
下载源码解压得到/Colorui-UniApp文献夹，复制目次下的 /colorui 文献夹到你的姿色根目次
App.vue引入瑕疵Css main.css icon.css
此时你不错使用colorUI提供的css形貌了，
因为colorUI的文档讲解正在完善中，具体形貌对应的类名可能不澄莹，那么你可将color-ui下载下来，使用HBuilderX运行在浏览器中，灵通调试器具，找到对应的节点即可获取对应的类名，（天然你也可能会有其他好的措施）。
使用colorui自界说导航栏
pages.json 配置取消系统导航栏
App.vue 得到系统信息
在main.js引入cu-custom组件
在需要的页面不错径直使用了，如下：
跨端兼容（如何你仅仅开导小要领，就不需要琢磨）
把柄平台特点，uni-app 提供了条目编译技术，在一个工程里优雅的完成了平台个性化已矣。
发布微信小要领
工作器域名必须是https正当域名
过问开导页面 开导 > 开导确立，确立工作器域名, 如图
发布小要领之前需要配置appid,诈欺称号、logo,可登录微信公众平台过问确立页，确立小要领的基本信息
使用HBuilderx找到刊行 > 小要领-微信，点击后稍等瞬息会启动微信开导器具，点击微信开导器具上传，填写上传信息即可，此时上传到微信群众平台是体验版，需要在版块处理>提交审核，恭候后台审核，审核完成后，小要领也就上线告捷了,如图：
1. 全北现代成立于1994年，共计9次赢得K联赛冠军，5次捧起韩足总杯，2次称雄亚冠。
讲求
本文主要先容了使用uni-app框架开导微信小要领，我方对默许模板的补充，包括封装request接口，援用color-ui,动态确立底部tab页，还有通过color-ui提供的导航栏组件，自界说导航栏。本东谈主诠才末学，抒发智商有限，书写经由如有作假接待指正，也请点赞指摘饱读吹（ps: 内心怕怕的）
对于uni-app更多信息可参考官方文档 https://uniapp.dcloud.io
以上等于本文的一齐现实软件开发，但愿对众人的学习有所匡助，也但愿众人多多缓助剧本之家。