[移动开发]小程序学习第五天（云开发，behaviors，computed计算属性，工程优化 ，发布上线）

一、云开发

wxml

<!--pages/index/index.wxml-->
<view class="container">
 ? ?<input type="text" model:value="{{phone}}" bindinput="input" placeholder="请输入账号"/>
 ? ?<input type="text" model:value="{{pass}}" bindinput="input" placeholder="请输入密码"/>
 ? ?<image src="{{img}}"></image>
?
 ? ?<button bindtap="chooseImage">选择图片</button>
 ? ?<button bindtap="addFile">add-file</button>
 ? ?<button bindtap="add">add</button>
 ? ?<button bindtap="get">get</button>
 ? ?<button bindtap="update">update</button>
 ? ?<button bindtap="remove">remove</button>
</view>
?
<view wx:for="{{arr}}">
 ?  {{item.phone}}--- <image src="{{item.fileID}}"></image>
 ? ?<button size="mini" bindtap="getOne" data-id="{{item._id}}">详情</button>
 ? ?<button size="mini" bindtap="updateOne" data-id="{{item._id}}">修改</button>
?
</view>
 
?

js

// 1）获取数据库的引用
let db = wx.cloud.database()
// console.log(db);
?
Page({
?
 ? ?/**
 ? ? * 页面的初始数据
 ? ? */
 ? ?data: {
 ? ? ? ?phone:"",
 ? ? ? ?pass:"",
 ? ? ? ?arr:[],
 ? ? ? ?img:""
 ?  },
 ? ?onShow(){
 ? ? ? ?this.get()
 ?  },
 ? ?input(){},
 ? ?add(){
 ? ? ? ?// 获取输入值
 ? ? ? ?let phone = this.data.phone
 ? ? ? ?let pass = this.data.pass
?
 ? ? ? ?// 执行添加数据
 ? ? ? ?db.collection('a-c').add({
 ? ? ? ? ? ?data:{
 ? ? ? ? ? ? ? ?// 字段名称：存储的数据
 ? ? ? ? ? ? ? ?phone:phone,
 ? ? ? ? ? ? ? ?pass:pass
 ? ? ? ? ?  },
 ? ? ? ? ? ?success:res=>{
 ? ? ? ? ? ? ? ?console.log(res);
 ? ? ? ? ? ? ? ?if(res._id){
 ? ? ? ? ? ? ? ? ? ?wx.showToast({
 ? ? ? ? ? ? ? ? ? ? ?title: '添加成功',
 ? ? ? ? ? ? ? ? ?  })
?
 ? ? ? ? ? ? ? ? ? ?this.get()
 ? ? ? ? ? ? ?  }
 ? ? ? ? ?  }
 ? ? ?  })
 ?  },
 ? ?get(){
 ? ? ? ?// 小程序端获取 数据最多只能返回20条
 ? ? ? ?// 云函数端获取 数据做多只能返回100条
?
 ? ? ? ?// 获取多条数据 {}
 ? ? ? ?db.collection('a-c').where({}).get({
 ? ? ? ? ? ?success:res=>{
 ? ? ? ? ? ? ? ?console.log(res);
 ? ? ? ? ? ? ? ?this.setData({
 ? ? ? ? ? ? ? ? ? ?arr:res.data
 ? ? ? ? ? ? ?  })
 ? ? ? ? ?  }
 ? ? ?  })
?
 ?  },
 ? ?getOne(e){
 ? ? ? ?// console.log(e);
 ? ? ? ?let id = e.target.dataset.id
 ? ? ? ?// doc _id
 ? ? ? ?db.collection('a-c').doc(id).get({
 ? ? ? ? ? ?success:res=>{
 ? ? ? ? ? ? ? ?console.log(res);
 ? ? ? ? ? ? ? ?
 ? ? ? ? ?  }
 ? ? ?  })
 ?  },
 ? ?update(){
 ? ? ? ?// 修改多条 where{}.update局部更新 
 ? ? ? ? db.collection('a-c').where({"pass":"11"}).update({
 ? ? ? ? ? ? data:{
 ? ? ? ? ? ? ? ? pass:"123"
 ? ? ? ? ? ? },
 ? ? ? ? ? ? success:res=>{
 ? ? ? ? ? ? ? ? console.log(res);
 ? ? ? ? ? ? }
 ? ? ? ? })
?
 ? ? ? ?
 ?  },
 ? ?updateOne(e){
 ? ? ? ?let id = e.target.dataset.id
 ? ? ? ?// 修改一条 doc(_id).update()/set()重新设置
 ? ? ? ?db.collection('a-c').doc(id).update({
 ? ? ? ? ? ?data:{
 ? ? ? ? ? ? ? ?pass:"11"
 ? ? ? ? ?  },
 ? ? ? ? ? ?success:res=>{
 ? ? ? ? ? ? ? ?console.log(res);
 ? ? ? ? ?  }
 ? ? ?  })
 ? ? ? ?// db.collection('a-c').doc(id).set({
 ? ? ? ?// ? ? data:{
 ? ? ? ?// ? ? ? ? pass:"11"
 ? ? ? ?// ? ? },
 ? ? ? ?// ? ? success:res=>{
 ? ? ? ?// ? ? ? ? console.log(res);
 ? ? ? ?// ? ? }
 ? ? ? ?// })
 ? ? ? ?
 ?  },
 ? ?remove(){
 ? ? ? ?// 删除多条 where({}).remove()
 ? ? ? ? db.collection("a-c").where({"pass":"123"}).remove()
 ? ? ? ? .then(res=>{
 ? ? ? ? ? ? console.log(res);
 ? ? ? ? })
 ?  },

2.云函数

一次最多可以获取100条数据，小程序端20条

可以直接返回openid----用户的唯一标识，appid等

小程序调用云函数：

remove(){
?
 ? ? ? ?// 调用云函数
 ? ? ? ?wx.cloud.callFunction({
 ? ? ? ? ? ?name:"remove",//云函数名称
 ? ? ? ? ? ?data:{//传参
 ? ? ? ? ? ? ? ?collection:"a-c",
 ? ? ? ? ? ? ? ?where:{"pass":"123"}
 ? ? ? ? ?  },
 ? ? ? ? ? ?success:res=>{
 ? ? ? ? ? ? ? ?console.log(res);
 ? ? ? ? ?  }
 ? ? ?  })
 ?  }

云函数端--运行在云端的代码--后台代码

本地代码：每次修改记得上传到云端

// 云函数入口文件
const cloud = require('wx-server-sdk')
?
cloud.init({
 ? ?env: "dev-wmunf"
})
?
// 云函数入口函数
exports.main = async (event={}, context) => {
 ? ?// event 接收传递的参数  context 云函数的运行情况
 ? ?// const wxContext = cloud.getWXContext()
?
 ? ?let db = cloud.database()
 ? ?// 删除多条  必须放在云函数段删除
 ? ?let res = await db.collection(event.collection).where(event.where).remove()
 ? ? 
?
 ? ?return {
 ? ? ? ?res,
 ? ? ? ?event, //默认注入appid openid
?
 ?  }
}

3.云存储

1.先获取临时图片路径

chooseImage(){
 ? ?
 ? ?// 调用 图片选择的api
 ? ?wx.chooseMedia({
 ? ? ? ?count: 1,
 ? ? ? ?success:(res)=> {
 ? ? ? ? ? ?// ? console.log(res.tempFiles[0].tempFilePath)
?
 ? ? ? ? ? ?// tempFilePath可以作为img标签的src属性显示图片
 ? ? ? ? ? ?this.setData({
 ? ? ? ? ? ? ? ?img:res.tempFiles[0].tempFilePath
 ? ? ? ? ?  })
 ? ? ?  }
 ?  })
},

2.上传并添加

addFile(){
 ? ?if(!this.data.img)return;
?
 ? ?// 处理后缀名
 ? ?// http://tmp/lAuUCuVuzgXR0af76f9a39ef41a9f9057741d4ca427c.jpeg
 ? ?let extName = this.data.img.split(".").pop()
 ? ?// console.log(extName);
 ? ?// return 
?
 ? ?// 处理云端路径
 ? ?let cloudPath = "web0712/"+new Date().getTime()+"."+extName
?
 ? ?// 1）调用 文件上传的api
 ? ?wx.cloud.uploadFile({
 ? ? ? ?cloudPath,
 ? ? ? ?filePath:this.data.img,
 ? ? ? ?success:res=>{
 ? ? ? ? ? ?console.log(res);
 ? ? ? ? ? ?if(res.fileID){
 ? ? ? ? ? ? ? ?// 2）文件id 存到数据里
?
 ? ? ? ? ? ? ? ?// ==============
 ? ? ? ? ? ? ? ?// 执行添加数据
 ? ? ? ? ? ? ? ?db.collection('a-c').add({
 ? ? ? ? ? ? ? ? ? ?data:{
 ? ? ? ? ? ? ? ? ? ? ? ?// 字段名称：存储的数据
 ? ? ? ? ? ? ? ? ? ? ? ?phone:this.data.phone,
 ? ? ? ? ? ? ? ? ? ? ? ?pass: this.data.pass,
 ? ? ? ? ? ? ? ? ? ? ? ?fileID:res.fileID
 ? ? ? ? ? ? ? ? ?  },
 ? ? ? ? ? ? ? ? ? ?success:result=>{
 ? ? ? ? ? ? ? ? ? ? ? ?console.log(result);
 ? ? ? ? ? ? ? ? ? ? ? ?if(result._id){
 ? ? ? ? ? ? ? ? ? ? ? ? ? ?wx.showToast({
 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?title: '添加成功',
 ? ? ? ? ? ? ? ? ? ? ? ? ?  })
?
 ? ? ? ? ? ? ? ? ? ? ? ? ? ?this.get()
 ? ? ? ? ? ? ? ? ? ? ?  }
 ? ? ? ? ? ? ? ? ?  }
 ? ? ? ? ? ? ?  })
 ? ? ? ? ?  }
 ? ? ?  }
 ?  })
}

二、behaviors

behaviors 是用于组件间代码共享的特性，类似于一些编程语言中的 “mixins” 或 “traits”。

每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。 每个组件可以引用多个 behavior ，behavior 也可以引用其它 behavior

示例：自己提取公共代码 common.js

module.exports = Behavior({
    properties:{
?
    },
    data:{
        a:1,
        b:0
    },
    methods:{
        add(){
            this.setData({
                a:2
            })
        }
    }
})

xx.js 页面使用

// pages/test/test.js
let myBehavior = require("../../common/common.js")
?
Component({
    behaviors:[myBehavior],
    data:{
        sum:1
    },
    methods:{
?
    }
})

三、computed计算属性

computed | 微信开放文档 文档地址

1.1概述

computed是小程序自定义组件扩展 behavior,在小程序组件中，计算属性 computed 和监听器 watch 的实现。在 data 或者 properties 改变时，会重新计算 computed 字段并触发 watch 监听器。目前针对的是component构造器

1.2扩展计算属性安装

在小程序端根目录 执行命令

1.npm init -y
2.npm install --save miniprogram-computed
3.构建npm---【点击工具--构建npm】
4.使用npm---【点击详情--本地设置--使用npm模块】

1.3computed 基本用法

test.wxml

<view>{{a}}+{{b}}={{sum}}</view>
<button bindtap="add">add</button>
?

test.js

// pages/test/test.js
let myBehavior = require("../../common/common.js")
let com = require("miniprogram-computed").behavior
?
Component({
    behaviors:[myBehavior,com],
    data:{
        sum:1
    },
    computed:{
        // sum(data){
        //  // 不能访问this
        //  return data.a+data.b
        // }
    },
    // watch:{
    //  "a,b":function(a,b){
    //      console.log(a,b);
    //      this.setData({
    //          sum:a+b
    //      })
    //  }
    // },
    observers:{
        "a,b":function(a,b){
            console.log(a,b);
            this.setData({
                    sum:a+b
                })
        }
    },
    methods:{
?
    }
})

1.4computed vs watch

从原理上说， watch 的性能比 computed 更好；但 computed 的用法更简洁干净。

此外， computed 字段状态只能依赖于 data 和其他 computed 字段，不能访问 this 。如果不可避免要访问 this ，则必须使用 watch 代替。

1.5watch vs observers

• 无论字段是否真的改变， observers 都会被触发，而 watch 只在字段值改变了的时候触发，并且触发时带有参数。

四、工程优化

1.分包

文档地址：分包加载 | 微信开放文档

某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时==按需进行加载==。每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。

主包：必须包含启动页面，tabbar，公共的资源 脚本文件
?
分包：一个分包不超过2M
?
    普通分包：依赖于主包内容----加载普通分包之前，先加载主包内容
    
    独立分包：不依赖主包内容和其他分包。-----只加载自己分包内的资源

优势

1.在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。 2.单个分包/主包大小不能超过 2M,整个小程序所有分包大小不超过 20M,能够将工程大小扩充到20M 3.对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。

1.1.配置分包结构

app.json

"subPackages": [
 ?  {
 ? ? ? ?"root": "pagesA",
 ? ? ? ?"pages": [
 ? ? ? ? ? ?"dog/dog"
 ? ? ?  ]
 ?  },
 ?  {
 ? ? ? ?"root": "pagesB",
 ? ? ? ?"pages": [
 ? ? ? ? ? ?"apple/apple",
 ? ? ? ? ? ?"banana/banana"
 ? ? ?  ],
 ? ? ? ?"name": "fruit",
 ? ? ? ?"independent": true
 ?  }
],
?

1.2.独立分包

app.json

"subPackages": [
 ?  {
 ? ? ? ?"root": "pagesA",
 ? ? ? ?"pages": [
 ? ? ? ? ? ?"dog/dog"
 ? ? ?  ]
 ?  },
 ?  {
 ? ? ? ?"root": "pagesB",
 ? ? ? ?"pages": [
 ? ? ? ? ? ?"apple/apple",
 ? ? ? ? ? ?"banana/banana"
 ? ? ?  ],
 ? ? ? ?"name": "fruit",
 ? ? ? ?"independent": true //设置独立分包
 ?  }
],

问题：

console.log('b分包-apple');
?
// 问题：直接打开独立分包 获取不到全局实例
        // 解决：allowDefault:true 允许获取到空对象 可以往全局实例中添加值
let app = getApp({allowDefault:true})//
app.isLogin = true //当App被调用时，默认实现中定义的属性会被覆盖合并到App中
?
console.log(app);

1.3.分包预下载

app.json

 ?"preloadRule": {
 ? ?"pages/weui/weui":{
 ? ? ?"packages": ["fruit"],
 ? ? ?"network": "all"
 ?  }
  }

2.基础库低版本兼容

兼容 | 微信开放文档 文档地址

小程序的功能不断的增加，但是旧版本的微信客户端并不支持新功能，所以在使用这些新能力的时候需要做兼容。

2.1版本号比较

比较方法【参考官方】

fun(){
        // const version = wx.getSystemInfoSync().SDKVersion
?
        // if (this.compareVersion(version, '2.10.4') >= 0) {
        //  wx.getUserProfile({
        //    desc: '完善资料',
        //    success:res=>{
        //        console.log(res);
        //    }
        //  })
        // } else {
        //  // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
        //  wx.showModal({
        //      title: '提示',
        //      content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
        //  })
        // }
    },
    compareVersion(v1, v2) {
        v1 = v1.split('.')
        v2 = v2.split('.')
        const len = Math.max(v1.length, v2.length)
?
        while (v1.length < len) {
            v1.push('0')
        }
        while (v2.length < len) {
            v2.push('0')
        }
?
        for (let i = 0; i < len; i++) {
            const num1 = parseInt(v1[i])
            const num2 = parseInt(v2[i])
?
            if (num1 > num2) {
                return 1
            } else if (num1 < num2) {
                return -1
            }
        }
?
        return 0
    },

2.2API 存在判断 （常见）

if (wx.getUserProfile) {
            wx.getUserProfile({
             ?desc: '完善资料',
             ?success:res=>{
                 ?console.log(res);
              }
            })
        } else {
            // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
            wx.showModal({
                title: '提示',
                content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
            })
        }

2.3wx.canIUse

    console.log(wx.canIUse('showModal.object.editable'));

3.骨架屏使用

骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。通常在小程序中，我们需要手工维护骨架屏的代码，当业务变更时，同样需要对骨架屏代码进行调整。为了开发的便利，开发者工具提供了自动生成骨架屏代码的能力。

先去project.config.json设置配置，在去生成骨架屏代码

骨架屏 | 微信开放文档 文档地址

五、发布上线

完善小程序资料（头像 名称 服务类目 简介）
?
1.检查代码包大小 2M 使用分包
2.切换成真实的appid,
3.检查请求的接口是否是合法的域名--在小程序后台配置过域名
4.点击上传-生成开发版本，设置体验版，交给测试人员
5.提交审核（驳回，修改代码继续提交，成功了就提交发布，就可以生成线上版本了，所有人可以访问）
?