使⽤uni-app开发⼩程序
uni-app 开发⼩程序
详见个⼈博客： (github.io⾸次加载较慢)
前⾔
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: ;
HBuilderX是通⽤的前端开发⼯具，但为uni-app做了特别强化。
HBuilderX提供了⼀些插件，可直接下载安装，具体如下图：⼯具 > 插件安装
项⽬结构
⾸先我们通过HBuilderx > ⽂件 > 项⽬，选择uni-app项⽬，模板我选择的是默认模板，当然你也可选择其他模板，接着确认创建，如果你选择的是默认模板，此时你的⽂件夹应该如下图：
接着我根据⾃⼰的项⽬需求，以及为了与vue的pc项⽬结构保持⼀下，分别添加如下⽂件夹
具体代码可参考GitHub:
+-- api -- (页⾯接⼝路径)
|  +-- login.js
|  +-- tools.js
+-- colorui -- (color-ui 样式)
+-- common -- (通⽤的js⽅法)
+-- components -- (通⽤的组件)
+-- pages -- (主要页⾯)
+-- services -- (通⽤的服务)
|  +-- auth.service.js -- (主要封装了⼀些保存⽤户的token⽅法)
|  +-- config.service.js -- (存放全局通⽤的变量)
|  +-- request.service.js -- (封装了quest的⽅法)
+-- static -- (静态⽂件)
+-- unpackage -- (在⼩程序模拟器运⾏的⽂件)
+-- App.vue -- (应⽤配置，⽤来配置App全局样式以及监听 )
+-- main.js -- ( Vue初始化⼊⼝⽂件)
+-- manifest.json -- (配置应⽤名称、appid、logo、版本等打包信息)
+-- pages.json -- (配置页⾯路由、导航条、选项卡等页⾯类信息)
+-- uni.scss -- (这⾥是uni-app内置的常⽤样式变量)
主要⽂件介绍：
api⽂件夹中存放的是各个页⾯的请求路径，引⼊request.service.js暴露出来的api，
colorui使⽤了color-ui样式，个⼈认为样式⾮常好看，⾮常感谢，详情：
common存放全局通⽤的js⽅法
components存放全局组件，包括uni-ui以及⾃⼰封装的组件
pages主要页⾯，其中pages⽂件夹中index⽂件中可布局底部的tab页⾯，通过v-if判断显⽰不同的tab页
如何制作app小程序
services通⽤的服务⽂件（我不知道这种描述是否准确，原来⽤的Angular4，Angular中服务概念对我有⼀定的影响）
auth.service.js通过使⽤uni.setStorageSync简单封装了⼀些保存⽤户的token⽅法
config.service.js保存全局的变量例如：apiUrl请求接⼝的IP, storage_key是token的键值，全局引⽤的变量都可定义在这个⽂件内，后期如果需要改动，只需要修改这个⽂件中对⽤的值
request.service.js使⽤Promise对quest进⾏封装，将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
<style>
@import "colorui/main.css";
@import "colorui/icon.css";
@import "app.css"; /* 你的项⽬css */
....
</style>
此时你可以使⽤colorUI提供的css样式了，
因为colorUI的⽂档说明正在完善中，具体样式对应的类名可能不清楚，那么你可将下载下来，使⽤HBuilderX运⾏在浏览器中，打开调试⼯具，到对应的节点即可获取对应的类名，（当然你也可能会有其他好的⽅法）。
使⽤colorui⾃定义导航栏
pages.json配置取消系统导航栏
"globalStyle": {
"navigationStyle": "custom"
},
App.vue获得系统信息
onLaunch: function() {
success: function(e) {
// #ifndef MP
Vue.prototype.StatusBar = e.statusBarHeight;
if (e.platform == 'android') {
Vue.prototype.CustomBar = e.statusBarHeight + 50;
} else {
Vue.prototype.CustomBar = e.statusBarHeight + 45;
};
// #endif
/
/ #ifdef MP-WEIXIN (⼩程序)
Vue.prototype.StatusBar = e.statusBarHeight;
let custom = wx.getMenuButtonBoundingClientRect();
Vue.prototype.Custom = custom;
Vue.prototype.CustomBar = custom.bottom + p - e.statusBarHeight;
// #endif
// #ifdef MP-ALIPAY
Vue.prototype.StatusBar = e.statusBarHeight;
Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
// #endif
}
})
},
在main.js引⼊cu-custom组件
import cuCustom from './colorui/components/cu-custom.vue'
Vueponent('cu-custom',cuCustom)
在需要的页⾯可以直接使⽤了，如下：
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">导航栏</block>
</cu-custom>
跨端兼容（如何你只是开发⼩程序，就不需要考虑）
根据平台特性，uni-app提供了条件编译⼿段，在⼀个⼯程⾥优雅的完成了平台个性化实现。
<view class="content">
<! -- #ifdef APP-PLUS -->
<view>仅出现在 5+App 平台下的代码</view>
<! -- #endif -->
<! -- #ifndef H5 -->
<view>除了 H5 平台，其它平台均存在的代码</view>
<! -- #endif -->
<! -- #ifdef H5 || MP-WEIXIN -->
<view>仅在 H5 平台或⼩程序平台存在的代码</view>
<! -- #endif -->
</view>
发布⼩程序
服务器域名必须是https合法域名
进⼊开发页⾯开发 > 开发设置，设置服务器域名, 如图
发布⼩程序之前需要配置appid，应⽤名称、logo，可登录公众平台进⼊设置页，设置⼩程序的基本信息
使⽤HBuilderx到发⾏ > ⼩程序-，点击后稍等⽚刻会启动开发⼯具，点击开发⼯具上传，
填写上传信息即可，此时上传到公共平台是体验版，需要在版本管理>提交审核，等待后台审核，审核完成后，⼩程序也就上线成功了，如图：
总结
本⽂主要介绍了使⽤uni-app框架开发⼩程序，⾃⼰对默认模板的补充，包括封装request接⼝，引⽤color-ui，动态设置底部tab页，还有通过color-ui提供的导航栏组件，⾃定义导航栏。本⼈才疏学浅，表达能⼒有限，书写过程如有错误欢迎指正，也请点赞评论⿎励（ps: 内⼼怕怕的）
关于uni-app更多信息可参考官⽅⽂档

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。