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 同时也是更好的小程序开发框架. 详见评测 https://ask.dcloud.net.cn/article/35947
好处如图:
我使用 uni-App 框架主要用来开发微信小程序, 我使用过程中感觉的好处是:
uni-App 框架使用的开发工具 HBuilderX,HBuilderX 内置相关环境, 开箱即用, 无需配置 Node.JS, 需要什么插件可直接下载, 测试, 打包, 发布特别方便.
uni-App 采用 Vue.JS 语法, 基本支持 vue 大部分语法(vue 的动态组件 component 不支持).
PC 端使用 vue 封装的一些 JS 方法, 以及建构思想, 可直接移植到 uni-App 中, 比如: 本人 pc 项目中 API 接口 JS 文件, 可直接复制到小程序框架 API 文件夹中(PS:API 文件夹维护后端请求路径)
uni-App 周边生态丰富, 插件市场 https://ext.dcloud.net.cn/ 可用的组件特别多, 也可使用 vue 语法自己封装一些组件.
开发工具(HBuilderX)
HBuilderX: 官网 IDE 下载地址 https://www.dcloud.io/hbuilderx.html ;
HBuilderX 是通用的前端开发工具, 但为 uni-App 做了特别强化.
HBuilderX 提供了一些插件, 可直接下载安装, 具体如下图: 工具> 插件安装
项目结构
首先我们通过 HBuilderx> 文件> 项目, 选择 uni-App 项目, 模板我选择的是默认模板, 当然你也可选择其他模板, 接着确认创建, 如果你选择的是默认模板, 此时你的文件夹应该如下图:
接着我根据自己的项目需求, 以及为了与 vue 的 pc 项目结构保持一下, 分别添加如下文件夹
具体代码可参考 GitHub: https://github.com/ShengChangWei/weixin-start
- +-- API -- (页面接口路径)
- | +-- login.JS
- | +-- tools.JS
- +-- colorui -- (color-ui 样式)
- +-- common -- (通用的 JS 方法)
- +-- components -- (通用的组件)
- +-- pages -- (主要页面)
- +-- services -- (通用的服务)
- | +-- auth.service.JS -- (主要封装了一些保存用户的 token 方法)
- | +-- config.service.JS -- (存放全局通用的变量)
- | +-- request.service.JS -- (封装了 uni.request 的方法)
- +-- 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 样式, 个人认为样式非常好看, 非常感谢, 详情: color-ui https://github.com/weilanwl/ColorUI
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
- <style>
- @import "colorui/main.css"; @import "colorui/icon.css"; @import "app.css";
- /* 你的项目 CSS */ ....
- </style>
此时你可以使用 colorUI 提供的 CSS 样式了,
因为 colorUI 的文档说明正在完善中, 具体样式对应的类名可能不清楚, 那么你可将 color-ui 下载下来, 使用 HBuilderX 运行在浏览器中, 打开调试工具, 找到对应的节点即可获取对应的类名,(当然你也可能会有其他好的方法).
使用 colorui 自定义导航栏
pages.JSON 配置取消系统导航栏
- "globalStyle": {
- "navigationStyle": "custom"
- },
App.vue 获得系统信息
- onLaunch: function() {
- uni.getSystemInfo({
- 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 + custom.top - 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'
- Vue.component('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 更多信息可参考官方文档 https://uniapp.dcloud.io/README
来源: https://www.cnblogs.com/shengmo/p/11810109.html