小程序模板升级2.0

小程序模板升级2.0

0.0 更新注意

0.1 重点注意事项

1. 老版本1.0的模板项目升级，只需要（参考2.1.1） 在老模板中添加对应的库和配置，不要把业务拷到2.0的新模板中

2. 一定要将plus.runtime.quit()替换成this.$p.tool.finish()

3. 测试更新：扫码调试小程序的情况下，返回键正常退出，证明库已经替换成功。

0.2 提交代码

如果是新增vue.config.js文件，提交代码打包wgt时，注意add添加

0.3 存在nvue界面

如果代码中存在nvue界面，注意添加#ifndef APP-PLUS-NVUE条件编译。具体参考（2.2.4 App.vue）注意事项。

1.0 介绍

pai-mp 2.0版本，是基于1.0的基础上，将所有工具、组件、样式等组合到@flyriselink/pai-mp-ui组件库中，并简化初始化过程，方便后期升级维护。同时将luch-request网络库使用npm的方式进行引入。

2.0 升级流程

2.1 安装方式

@flyriselink/pai-mp-ui的安装两种方式二选一：package.json、npm安装

2.1.1 package.json

"dependencies": {
    "luch-request": "^3.0.7",
    "@flyriselink/pai-mp-ui": "^1.0.0"
}

2.1.2 npm安装

加载凌云小程序模板库

npm i @flyriselink/pai-mp-ui

加载网络库

npm i luch-request -S 

2.2 初始化

需要调整四个模板文件：vue.config.js、pages.json、main.js、App.vue

2.2.1 vue.config.js

文件在最外层根目录，不存在手动创建

transpileDependencies：允许node_model中的库，使用uni-app的编译方式进行条件编译

module.exports = {
    transpileDependencies: ['uview-ui','luch-request','@flyriselink/pai-mp-ui'],
    css: {
        loaderOptions: {
            scss: {
                prependData: `@import "~@/uni.scss";`
            }
        }
    }
}

2.2.2 pages.json

easycom的方式动态加载pai-mp组件，如需import的方式引入

"easycom": {
        "autoscan": true,
        "custom": {
            "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue",
            "^pai-mp-(.*)": "@flyriselink/pai-mp-ui/widget/pai-mp-$1/pai-mp-$1.vue"
    }
}

2.2.3 main.js

全局注册pai-mp库中的工具类

import flyrise from "@flyriselink/pai-mp-ui";

//pai工具$p
Vue.use(flyrise)

2.2.4 App.vue

全局初始化pai-mp库中的函数

<script>
    export default {
        onLaunch: function() {
            this.$p.life.onLaunch()
            this.$p.sensor.init(this) // 神策初始化
        },
        onShow: function() {
            this.$p.life.onShow()
        },
        onHide: function() {
            this.$p.life.onHide()
        }
    };
</script>

<style lang="scss">
    @import "uview-ui/index.scss";
    @import "@flyriselink/pai-mp-ui/index.scss";
</style>

如果使用的是UView1.0并报nvue的错误属性错误

/*#ifndef APP-PLUS-NVUE*/
@import "uview-ui/index.scss";
@import "@flyriselink/pai-mp-ui/index.scss";
/*#endif*/

3.0 组件使用

3.1 网络请求

3.1.1 方式一

需要自动带token的请求方式，普通用户业务请求

import {http} from '@flyriselink/pai-mp-ui/common/service.js'

//获取用户详情-管理员判断
export const getUserDetail = () => {
    return http.get("/console-api/user/v1/me", {})
}

3.1.2 方式二

一般用于用户登录等无需带用户token的请求

//npm加载使用 import {BASE_URL} from '@flyriselink/pai-mp-ui/common/config.js' 
import {
    BASE_URL
} from '../common/config.js' 

import Request from 'luch-request'

const request = new Request()
request.setConfig((config) => {
    config.baseURL = BASE_URL
    config.header = {
        ...config.header
    }
    return config
})

/**获取短信验证码*/
export const getSMSVerifyCode = (phone) => {
    return request.post(`/auth-api/oauth2/sendLoginSms/${phone}`)
}

3.2 工具类使用

3.2.1 函数名

3.2.2 使用方式

this.$p.tool.toast("登录成功")

3.3 缓存参数

3.3.1 参数

3.3.2 使用方式

this.$p.tool.save(this.$p.sp.refreshToken, refreshToken)

4.0 注意事项

4.1 直达页面

直达页面：凌云套件的微应用跳转的皆是直达页面，直达页面返回时需要关闭小程序。

uni-app默认进入page.js配置的首页，当带上path是，默认会进入相应界面，但会存在返回键、返回去到首页等问题。需要重定向。

1. 定义变量

 data() {
    return {
      isRedirect:false
    }
 }

2. 隐藏返回键

onLoad(e) {
   this.isRedirect = this.$p.tool.redirect(this, e)
}

3. 自定义返回事件

onBackPress() {
     if (this.isRedirect) {
       this.$p.tool.finish()
       return true;
     }
      return false;
}

4.2 关闭小程序

4.2.1 调用函数

//将plus.runtime.quit()全部替换成finish()
this.$p.tool.finish()

4.2.2 自定义示例

/**
 * mp_micro_finish: 彻底关闭当前小程序
 */
static finish() {
    plus.runtime.quit()
    this.sendNative("mp_micro_finish", "");
}

4.3 修改工程名

尽量不要修改工程名，如果修改的不彻底，很有可能导致发布数据异常问题。

4.3.1 manifest.json

注意base会自动移除pai-前缀

{
    "name": "pai-uni-basic",
    "h5": {
        "router": {
            "base": "/uni-basic/"
        }
    }
}

4.3.2 Deployment.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: pai-uni-basic
  labels:
    app: pai-uni-basic
  namespace: test
spec:
  replicas: 1
  selector:
    matchLabels:
      app: pai-uni-basic
  template:
    metadata:
      labels:
        app: pai-uni-basic
    spec:
      containers:
        - name: pai-uni-basic
          image: fedemo.cn:8082/pi-dev/pai-uni-basic:latest
          imagePullPolicy: Always
          ports:
            - containerPort: 80
      imagePullSecrets:
        - name: login

4.3.3 Dockerfile

注意pai-uni-basic和uni-basic

FROM node:14-alpine as builder

RUN mkdir -p /tmp/pai-uni-basic

COPY package.json /tmp/pai-uni-basic/package.json

RUN cd /tmp/pai-uni-basic && npm install && mkdir -p /build/pai-uni-basic && cp -a /tmp/pai-uni-basic/node_modules /build/pai-uni-basic/

WORKDIR /build/pai-uni-basic
COPY . .

RUN npm run build:h5

FROM nginx:alpine
MAINTAINER cm<cm@flyrise.cn>
RUN mkdir -p /var/log/nginx
RUN mkdir -p /usr/share/nginx/html/uni-basic

COPY --from=builder /build/pai-uni-basic/dist/build/h5/ /usr/share/nginx/html/uni-basic/
COPY default.conf /etc/nginx/conf.d/default.conf
WORKDIR /usr/share/nginx/html/uni-basic/

4.3.4 Service.yaml

注意与工程名匹配pai-uni-basic

apiVersion: v1
kind: Service
metadata:
  name: pai-uni-basic
  namespace: test
  labels:
    app: pai-uni-basic
    register: disable
    ingress: front
spec:
  type: NodePort
  ports:
    - port: 80
      targetPort: 80
  selector:
    app: pai-uni-basic

5.0 神策分析

uni-app当前还不支持全量埋点，所以需要手动埋点，收集数据

5.1 初始化

//App.vue
onLaunch: function() {
    this.$p.life.onLaunch()
    this.$p.sensor.init() // 神策初始化
}

5.2 代码埋点

/**
 * 代码埋点:eventName事件名称;data:数据
 *sensors.track("eventName",{key : "value"});
 * **/
 static track(event, data) {
    if (sensors) {
        sensors.track(event, data);
    }
 }

5.3 登录

/**
 * 登录：需要调用 login 接口
 *login("<#登录 id#>")
 **/
static login(data) {
    if (sensors) {
        sensors.login(data);
    }
}

5.4 全局变量

/**
 * 全局变量： register 方法将属性注册为公共属性
 *register({key1:"value1",key2 : "value2"})
 */
static register(data) {
    if (sensors) {
        sensors.register(data);
    }
}

5.5 设置用户属性

/**
 * 设置用户属性，同一个 key 多次设置时，value 值会进行覆盖替换
 *setProfile({key1:"value1",key2:"value2"})
 */
static setProfile(data) {
    if (sensors) {
        sensors.setProfile(data);
    }
}

5.6 设置标题

/**
 * 设置页面标题
 */
static trackTitle(title) {
    this.track("$UniMPStart", {
        $title: title
    })
}