微信小程序(云)开发小笔记

2021-03-22 本文已影响0人誰在花里胡哨

24.云开发发送手机验证码
23.云开发获取当前微信用户绑定的手机号
22.如何实现刷新当前页面
21._.or()查询多个符合条件的数据
20..add()数据时返回值是res
19.moment 格式化时间不匹配
18.onShow(options) 参数拿不到
17.常用云函数指令
16.父子组件通信
15.input修改数组对象的某一个值
14.微信map地图组件闪退问题
13.日期格式化：
12.下拉加载更多：
11.空格，'&nbsp'问题
10.text文本属性
9.rich-text 富文本图片和换行问题
8.对象深拷贝
7.request请求封装
6.修改页面背景色
5.<image>mode属性
4.IOS<video>黑屏问题
3.微信小程序暗黑模式
2.微信小程序escape转码
1.微信小程序生成二维码

24.云开发发送手机验证码

cloudbase.sendSms
微信小程序cloudbase.sendSms中template_id怎么获取？
你可能会遇到发送成功但是一直收不到验证码的问题

image.png

或者在云开发控制台，查看 短信监控 日志
image.png

23.云开发获取当前微信用户绑定的手机号

1.用户点击授权按钮获取code
2.接口通过code获取手机号

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
...
Page({
  getPhoneNumber (e) {
    console.log(e.detail.code)
  }
})

//云函数 config.json 中配置
{
  "permissions": {
    "openapi": [
      "phonenumber.getPhoneNumber"
    ]
  }
}
...
//云函数调用
    const result = await cloud.openapi.phonenumber.getPhoneNumber({
            code: '获取的code'
        });
        return {
            success: true,
            data: result,
            message: '获取成功'
        };

你可能会遇到获取不到code的问题，建议更新手机微信版本或者开发工具版本。

确认当前基础库版本是否为 2.21.2 及以上。

正常情况下，基础库 2.21.2 对应的是客户端版本号为 8.0.16，如果你的版本低于 8.0.16 并且是通过开发者工具向客户端推送的 2.21.2 基础库，大几率不会返回 code 参数，请手动更新微信版本。

22.如何实现刷新当前页面

网上有很多方法，我这边采用的是 this.onLoad()，不过这种方式需要你重新初始化一遍data里面的数据

简单实现一个倒计时，结束时刷新页面

let timer = null
const time = 120 //有效时间120，超时自动刷新
Page({
  data: {
        validTime: time
    },
  onLoad: function (options) {
      this.validTimeInit()
   },
  onUnload: function () {
        clearInterval(timer)
   },
  validTimeInit() {
        let _this = this
        timer = setInterval(() => {
            let validTime = this.data.validTime
            validTime--
            if (validTime < 0) {
                clearInterval(timer)
                _this.setData({
                    validTime: time
                })
                _this.onLoad()
            } else {
                this.setData({
                    validTime: validTime
                })
            }
        }, 1000);
    }
})

21._.or()查询多个符合条件的数据

云开发查询or的用法
 _.eq() 查询筛选条件，表示字段等于某个值

 const stores = data.map(s => { return _.eq(s._storeId) }) || []
const { data: storesInfo } = await db.collection('hyc_stores').where({_id: _.or(stores) }).get()

20..add()数据时返回值是res

.add()
类似.where,.update返回的都是 res.data,而.add返回的是res,且只有添加成功的_id

image.png

19.moment 格式化时间不匹配

不清楚具体原因，但是网上说是时区问题
加上 .utcOffset(480) 就可以了

 moment().utcOffset(480).format('YYYY-MM-DD HH:mm:ss')

18.onShow(options) 参数拿不到

onShow和onLoad的区别
Page页面级 onShow 没有 options,全局的App里面的 onShow才有，想获取到参数尽量用 onLoad
https://developers.weixin.qq.com/community/develop/doc/0008005f68c300c912070098b56800

17.常用云函数指令

const _ = db.command

_.or ：满足其中一个条件即可跨字段的或操作;
查询更新数组/对象

//数组 arr 第 index 下标对象的 id
 [`arr.${index}.id`]: id

联表查询

16.父子组件通信

使用微信小程序全局变量
小程序的全局变量存储在文件 app.js 的globalData对象中

// app.js 中定义
App({
    globalData: {
      hasLogin: false,
      openid: null
    },
})
// 其他文件中读取使用
const app = getApp();
console.log(app.globalData.hasLogin)

使用微信小程序的数据缓存

 wx.setStorageSync('userInfo', data)

 wx.getStorageSync('userInfo')

使用父子组件间的属性
父组件传值给子组件，子组件可以在 properties 中接收并使用
子组件传值给父组件，可以通过方法触发 triggerEvent

//子组件
 this.triggerEvent('myEvent',传参)
//父组件
<子组件 bind:myEvent="传递方法" />

15.input修改数组对象的某一个值

解决方案

14.微信map地图组件闪退问题

安卓手机在切换tab的时候，频繁切换时，小程序会闪退
解决方案

13.日期格式化：

<wxs src="../../utils/filter.wxs" module="filter"></wxs>
 <text class="time"> {{filter.format(newsMsg.createAt,'YYYY-MM-DD')}}</text>

利用.wxs方法，在页面上引入
utils/filter.wxs

function format(date, fmt) {
  let ret;
    const opt = {
        "Y+": date.getFullYear().toString(),        // 年
        "m+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "M+": date.getMinutes().toString(),         // 分
        "S+": date.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
    };
    for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
    };
    return fmt;
}

function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

function getWeek(n) {
  switch (n) {
    case 1:
      return '星期一'
    case 2:
      return '星期二'
    case 3:
      return '星期三'
    case 4:
      return '星期四'
    case 5:
      return '星期五'
    case 6:
      return '星期六'
    case 7:
      return '星期日'
  }
}

module.exports.format = format

12.下拉加载更多：

.json

"enablePullDownRefresh":true,

.wxml

 /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.setData({
      pages: 0,
      list: [],
      'queryModel.current': 1,
      'queryModel.size': 10,
      'queryModel.totalCount': 0
    })
 // 接口加载数据
    this.getNewsPage()
  // 停止加载，下拉返回
    wx.stopPullDownRefresh();
  },

11.空格，'&nbsp'问题

👉　复　制　吧　👈
微信小程序中的多个空格怎么打？ | 微信开放社区

10.text文本属性

如果属于纯文本，切属于 <textarea>输出的内容，尽量用 <text>组件标签

<text>{{details.intro}}</text>

9.rich-text 富文本图片和换行问题

rich-text

 <rich-text  nodes="{{details.content}}"></rich-text>

图片百分比

//rich-text富文本图片自适应处理
// content 为富文本内容
content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')

不换行问题/app.wxss

/* 富文本样式，解决富文本不换行问题 */
rich-text {
  word-break: break-all;
  white-space: pre-wrap;
}

8.对象深拷贝

//对象深拷贝
const deepClone = function (obj, newObj) {
  var newObj = newObj || {};
  for (let key in obj) {
    if (typeof obj[key] == 'object') {
      let isArray = Array.isArray(obj[key]); //判断是否数组
      newObj[key] = (isArray == true ? [] : {})
      deepClone(obj[key], newObj[key]);
    } else {
      newObj[key] = obj[key]
    }
  }
  return newObj;
}
module.exports = {
  deepClone
}

7.request请求封装

utils/request.js

const baseURL = '服务器地址';

function request(method, url, data) {
  return new Promise(function (resolve, reject) {
    let header = {
      'content-type': 'application/json',
    };
    wx.request({
      url: baseURL + url,
      method: method,
      data: method === 'POST' ? JSON.stringify(data) : data,
      header: header,
      success(res) {
        //请求成功
        //判断状态码---errCode状态根据后端定义来判断
        if (res.data.code == 200) {
          resolve(res.data);
        } else {
          //其他异常
          reject('运行时错误,请稍后再试');
        }
      },
      fail(err) {
        //请求失败
        reject(err)
      }
    })
  })
}
export default request

api/index.js使用

// 小程序接口
import request from '../utils/request'
const API = {
  getFlightPage: (data) => request('POST', '/flight/page', data),
  // 查询各模块的在线生活服务
  lifeServeList: (moduleId) => request('GET', `/module/life/service/list?module=${moduleId}`),
}
module.exports = {
  API: API
}

app.js入口引入

//引入api接口
const $api = require('./api/index').API
...
App({
$api,
...
})

.wxml

const app = getApp()
...
//接口调用
 app.$api.newsDetails().then(res => {})

6.修改页面背景色

.wxss

page{
background-color:'每个页面都可以自定义背景色'
}

5.<image>mode属性

<image>组件

4.IOS<video>黑屏问题

custom-cache="{{false}}"
一般缓存为一级缓存、二级缓存、和自定义缓存，换而言之custom-cache="{{false}}"就是不使用自定义缓存的意思。为什么用了视频组件会卡loading加载不出来呢，可能是因为微信设置的自定义缓存的位置有容量限制，因此将它关闭了以后会自动使用系统缓存，可能就没有这个问题了。

<video autoplay="true" src="{{url}}" controls custom-cache="{{false}}"></video>

3.微信小程序暗黑模式

暗黑模式详解文章

2.微信小程序escape转码

例如你要传递一个URL链接参数到下一个页面，你可能发现微信会自动给你截取一部分参数，因此可以通过此种方式避免。

//转码
escape()
//解码
unescape()

1.微信小程序生成二维码

weapp-qrcode.js

//引入
const QRCode = require('../../utils/weapp-qrcode.js')

//使用
  new QRCode('myQrcode', {
      text: `xxx链接`,
      width: 200,
      height: 200,
      padding: 12, // 生成二维码四周自动留边宽度，不传入默认为0
      correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
      callback: (res) => {
        console.log(res.path)
        // 接下来就可以直接调用微信小程序的api
      }
    })

<canvas class="canvas-code"canvas-id="myQrcode" style="background:#fff;width: 200px;height: 200px;"/>

//调用扫一扫获取结果
// 只允许从相机扫码
    wx.scanCode({
      onlyFromCamera: true,
      success(res) {
        wx.navigateTo({
          url: res.result //xxx链接
        })
      }
    })