uni-app初体验
uni-app简介
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。
即使不跨端,uni-app同时也是更好的小程序开发框架。
类似mp-vue,或者是它的增强版
uni-app好处
学习成本低,容易上手(vue语法),一次编译,多个平台通用,uni自身也对小程序的api进行了装饰,使用起来比原生的更方便,支持vant等组件库。
uni-app搭建
推荐使用配套的hbuilder搭建,创建步骤见官网
uni-app项目结构
├─components // 组件目录
├─packageA // 小程序的分包目录
│ └─pages
│ └─detail
├─pages // 小程序的页面目录
│ ├─comment
│ ├─home
│ ├─index
│ └─me
├─static // 静态资源文件目录
├─unpackage // 打包出口
│ └─dist
│ └─dev
│ └─mp-weixin // 在hbuilder小程序的打包文件
├─utils // 存放request等工具
页面设置
在uni-app中,我们可以在pages.json
中配置小程序页面、分包、页签、全局配置等。注意: 分包的访问路由路径要带上包名 url: 'packageA/pages/detail/index'
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/home/index",
"style" : {
"backgroundTextStyle" : "light",
"navigationBarBackgroundColor" : "#EA5149",
"navigationBarTitleText" : "ALANBOOK",
"navigationBarTextStyle" : "light",
"enablePullDownRefresh" : true
}
}
],
"subPackages" : [
{
"root" : "packageA",
"pages": [
{
"path" : "pages/detail/index",
"style" : {
"backgroundTextStyle" : "light",
"navigationBarBackgroundColor" : "#EA5149",
"navigationBarTitleText" : "图书详情",
"navigationBarTextStyle" : "light"
}
}
]
}
],
"tabBar" : {
"selectedColor" : "#EA5149",
"list" : [
{
"pagePath" : "pages/home/index",
"text" : "图书",
"iconPath":"static/book.png",
"selectedIconPath":"static/book-active.png"
}
]
},
"globalStyle": {
"backgroundTextStyle" : "light",
"navigationBarTitleText": "ALNA图书",
"navigationBarBackgroundColor" : "#EA5149",
"backgroundColor": "#F8F8F8"
},
"condition" : { //模式配置,仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [
{
"name": "", //模式名称
"path": "", //启动页面,必选
"query": "" //启动参数,在页面的onLoad函数里面得到
}
]
}
}
调试工具
我们可以在./App.vue中的生命周期函数配置vcode模式,当我们使用真机调试时,即可以打开控制台
export default {
onLaunch: function() {
// 打开调试
/* uni.setEnableDebug({
enableDebug: false
}) */
console.log('App Launch')
}
}
全局变量的配置
我们可以在./App.vue下配置globalData对象,并在里面写入一些初始值
export default {
globalData: {
hasLogin: !!uni.getStorageSync('openid')
}
}
读取getApp().globalData.hasLogin
,写入getApp().globalData.hasLogin = true
另外官方还推荐了另外两种,总共三种,只记得有一个是放在Vue的原型链上
request的封装
顺便说一句,uni是一个类似于wx的全局对象,估计就是把wx的引用赋给了它。
对于使用回调的函数,我们可以将它改造成async/await的样子。
import config from '../config'
export default (options) => {
const { url,method,data } = options
return new Promise((resolve, reject) => {
uni.request({
data,
method,
url: config.host + '/' + url,
success(res) {
if (res.statusCode === 200) {
if(!res.data.success) uni.showToast({
icon : 'none',
title: res.data.msg || ''
})
resolve(res.data)
} else {
reject(res)
}
}
})
})
}
对于开发服务器,mongoose使用了大量的回调函数,我也是使用promise这种形式将他改造,但是new Promise这种代码量还是大。
全局storage
我们可以通过下面这两个api获取或存储全局的storage
// 非同步
uni.setStorage({
key: 'storage_key',
data: 'hello',
success: function () {
console.log('success');
}
});
uni.getStorage({
key : '',
success : '',
fail : '',
complete : ''
})
// 同步
try {
uni.setStorageSync('storage_key', 'hello');
} catch (e) {
// error
}
try {
const value = uni.getStorageSync('storage_key');
} catch (e) {
// error
}
上线的配置
要注意以下几点
- 线上版本包括体验版需要使用合法域名,必须在开发设置里注册,并使用https
- 体验版可以直接上传,然后在版本管理预览二维码
- 开发者工具没有appid的话,无法进行预览
- 正式版本不要多次提交,否则被叼
分享设置
在页面onload的时候设置,既可以点右上角分享
wx.showShareMenu()
openid
openid是用户在开发者小程序的唯一标识。
用户的昵称信息是可以随便获取的,但是,用户的openid是通过用户使用wx.login发送到服务器端,再从服务器端发送wx服务器拿到openid
wx.login({
async success (res) {
if (res.code) {
//发起网络请求
const { success,msg,openid } = await request({
method : 'post',
url:'login',
data: {code : res.code,user }
})
uni.setStorageSync('openid',openid)
getApp().globalData.hasLogin = true
uni.switchTab({
url : '/pages/home/index'
})
} else {
console.log('登录失败!' + res.errMsg)
}
}
})
所以登录这个流程是有点麻烦的,需要从产品的思维去考虑
storage中没有openid -> 未登录 -> 登录 -> 获取用户信息 -> 发送login -> 服务器获取openid -> 并将openid与用户信息存储到数据库 -> 返回openid -> 客户端保留在本地
storage中没有openid -> 调用wx.login -> 服务器查找有没有该openid的用户 -> 没有 ->未登录 / 有 -> 返回用户信息 ,openid (换手机的情况)
其实也不需要storage存储,但每次进入小程序就调用一次登录接口么 ? 是不是有点麻烦 ?