uni-app初体验

2019-10-27  本文已影响0人  zdxhxh

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
}

上线的配置

要注意以下几点

分享设置

在页面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存储,但每次进入小程序就调用一次登录接口么 ? 是不是有点麻烦 ?

上一篇 下一篇

猜你喜欢

热点阅读