小程序开发记录

关键词：微信小程序，uni-app，mp-vue，hbuilder，iview weapp

37 记录：文本复制

解答：

wx.setClipboardData({
  data: 'data',
  success (res) {
    wx.getClipboardData({
      success (res) {
        console.log(res.data) // data
      }
    })
  }
})

36 记录：智能识别地址

解答：收货地址中加入智能识别地址 - 小短腿奔跑吧 - 博客园

35记录：微信小程序之修改层级数组数据

解答：

let i = e.currentTarget.dataset.index;
let key = "resultList["+this.data.showCategoryIndex+"].goods["+i+"].isFold";
let value = !this.data.resultList[this.data.showCategoryIndex].goods[i].isFold;
this.setData({ [key]: value });

34记录：ReferenceError: WeixinJSBridge is not defined

33记录：canvasToTempFilePath:fail Failed to execute 'drawI…or ImageBitmap or OffscreenCanvas or VideoFrame)'

32记录：canvasToTempFilePath: fail canvas is empty"

解答：wx.canvasToTempFilePath的canvasId没有跟canvas的ID一致。

31记录：Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas or VideoFrame)'

30记录：页面左上角返回按钮返回至指定页

解答：

1 指定返回第几层
uni.navigateBack({  delta: 2 })

onUnload: function onUnload() {uni.navigateBack({  delta: 2 })}
2 返回首页
onUnload: function onUnload() {uni.switchTab({ url: '/pages/tabBar/home/home'})}

29记录：云托管请求封装之wx.cloud

解答：

// api.js
const wxCloud = async function (params, url, number = 0) {
  console.log('wxc=', params, url, number)
  const that = this
  if(that.cloud == null){
    that.cloud = new wx.cloud.Cloud({
      resourceAppid: 'wx310de2a5ae44414f', // 微信云托管环境所属账号，服务商appid、公众号或小程序appid
      resourceEnv: 'prod-8gw8ynhq95367f2a', // 微信云托管的环境ID
    })
    await that.cloud.init() // init过程是异步的，需要等待init完成才可以发起调用
  }
  try{
    const result = await that.cloud.callContainer({
      path: url, // 填入业务自定义路径和参数，根目录，就是 / 
      method: params.method || 'GET', // 按照自己的业务开发，选择对应的方法
      // dataType:'text', // 如果返回的不是json格式，需要添加此项
      header: {
        'X-WX-SERVICE': 'springboot-hebq', // xxx中填入服务名称（微信云托管 - 服务管理 - 服务列表 - 服务名称）
        // 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
      },
      data: params.data || {}
    })
    console.log(`微信云托管调用结果${result.errMsg} | callid:${result.callID}`)
    return result.data // 业务数据在data中
  } catch(e){
    const error = e.toString()
     // 如果错误信息为未初始化，则等待300ms再次尝试，因为init过程是异步的
    if(error.indexOf("Cloud API isn't enabled") != -1 && number < 3){
      return new Promise((resolve)=>{
        setTimeout(function(){
          resolve(that.call(params, number + 1))
        }, 300)
      })
    } else {
      throw new Error(`微信云托管调用失败${error}`)
    }
  }
}

const HealthCheck = (params) => wxCloud(params, '/api/brand.json');
export default {Text}

// 页面调用
const Api = require("../api").default;
Api.Text({
    method: "get",
    data:{} // 入参
}).them(res => {
    console.log('success', res)
}).catch(err => {
    console.error('error', err)
});

28记录：微信请求封装之wx.request

解答：

// api.js
const wxRequest = function (params, url) {
  console.log('wx=', params, url)
  wx.showToast({
    title: '加载中...',
    icon: 'loading'
  })
  wx.request({
    url: url,
    method: params.method || 'GET',
    data: params.data || {},
    header: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
    },
    success: function (res) {
      params.success && params.success(res)
      wx.hideToast()
    },
    fail: function (res) {
      params.fail && params.fail(res)
    },
    complete: function (res) {
      params.complete && params.complete(res)
    }
  })
}

const Text= (params) => { wxRequest(params, host + '/api/brand.json') };

export default {Text}

// 页面调用
const Api = require("../api").default;
Api.Text({
    method: "get",
    data:{}, // 入参
    success: (res) => {}, // 成功返回
    fail: (err) => {}, // 失败返回
})

27记录：云托管上传图片并回传

解答：

Page({
    async onLoad() {
        wx.cloud.init({
            env: '云托管环境ID'
        })
        wx.chooseImage({
            count: 1,
            async success(res) {
                console.log('开始上传文件',res.tempFilePaths[0])
                const { fileID } = await wx.cloud.uploadFile({
                    cloudPath: 'test.png', // 这个文件地址可以换成动态的
                    filePath: res.tempFilePaths[0]
                })
                console.log('上传成功，开始转换',fileID)
                const info = await wx.cloud.callContainer({
                    path: '/made',
                    method: 'GET',
                    data:{
                        fileid:fileID
                    },
                    header: {
                        'X-WX-SERVICE': 'img',
                    }
                });
                console.log('转换完毕',info.data);
                if(info.data.code===0){
                    console.log('开始下载转换文件',info.data.fileid);
                    const downfile = await wx.cloud.downloadFile({
                        fileID:info.data.fileid
                    }) 
                    wx.previewImage({
                      urls: [downfile.tempFilePath],
                    })
                }
            }
        })
    }
})

26记录：nvm，node

解答：nvm下载切换node，命令行显示成功，实际未成功或者报错node不是命令-CSDN博客

25记录：获取小程序码/小程序二维码/动态参数

解答：微信小程序生成带动态参数二维码_小程序二维码带参数-CSDN博客

https://www.xjx100.cn/news/427348.html?action=onClick

1 wxacode.get （100.000）

2 wxacode.createQRCode （100.000）

3 wxacode.getUnlimited （无限）

24记录：微信小程序图片上传机制

解答：微信小程序图片上传机制_微信小程序上传图片-CSDN博客

23记录：保存至相册

解答：微信小程序保存相册授权全过程：第一次授权、已授权、拒绝后再授权_微信小程序 保存图片功能 需要手机怎么授权-CSDN博客

22记录：分享给好友、分享至朋友圈，获取AppID，AppSecret

解答：如何在小程序中实现分享功能？_小程序开发中心

21记录：海报

解答：https://blog.51cto.com/u_15668841/6090217

20记录：是否授权之按钮授权与自动授权

解答：小程序学习笔记---获取用户授权_小程序判断用户是否授权-CSDN博客

1 按钮授权
uni.getSetting({
            success: (res) => {
              if(!res.authSetting['scope.userInfo']) {
                uni.authorize({
                  scope: 'scope.userInfo',
                  success: () => {
                    uni.showToast({
                      title: '授权中……',
                      icon: 'loading',
                      duration: 2000,
                      success() { _this.toHome(true); },
                      fail() { _this.toHome(false); },
                      complete() { _this.toHome(false); }
                    });                   
                  },
                  fail: (err) => { console.error(err); }
                })

              }
            },
            fail: (err) => { console.error(err); }
          });

 2 自动授权

19记录：摄像头、地理位置等授权

解答：微信小程序授权流程-CSDN博客

18记录：实现微信登录

解答：【微信小程序开发】之微信授权登陆_微信开发者工具 授权登录-CSDN博客

17记录：微信小程序设置合法域名

解答：微信小程序开发工具设置合法域名 - 一门小程序教程

微信小程序合法域名申请-广力云微信

微信小程序模拟器正常但二维码预览网络请求失效或白屏一种解决办法_Silly_Master的博客-CSDN博客

16记录：小程序分享转发功能

解答：微信小程序开发之分享转发功能多种实现方案（论函数复用的几大姿势）

小程序实现分享的三种方法_小程序分享_阳光男孩2916的博客-CSDN博客

15记录：微信小程序开发设置获取权限管理,摄像头权限,位置权限,用户信息权限等

解答：https://blog.csdn.net/qq_41974199/article/details/131970634

14记录：使用微信开发平台登录

解答：微信小程序登录流程 - 简书

13记录：关于微信小程序开发中遇到的缺少game.json问题的解决。

原因：主要是申请的测试号是小游戏的，小游戏的入口文件是game.json和game.wxml，而小程序的入口文件是app.json和app.wxml，因此在上传文件的时候会报错。

解答：重新注册一个新的账户，做小程序使用。

12记录：路由跳转传参

解答：

1 ?拼接，入参简短
uni.navigateTo({ url:"../brand/query_category?brand='格力'" });
?params=encodeURIComponent(JSON.stringify(data)); //JSON.parse(decodeURIComponent(options.params))
2 入参数据多，窗体通讯(待验证)
uni.$emit('函数名', '参数');
uni.$on('函数名', '参数'); // 函数名$on与$emit同
uni.$off('函数名'); // 清除监听器
3 入参数据多,全局变量
uni.setStorage({key: "", data: ""});
uni.getStorage({key: "", data: ""});

11记录：小程序之父子组件通信

解答：子组件通过triggerEvent调用父组件方法。绑定自定义方法【bind方法名】，data-event-opts=【自定义方法名，父组件接收方法，参数】。

child.js 
this.triggerEvent('事件名', 参数);
parent.js
<child-component-name data="{{cities}}" 
 data-event-opts="{{[['detail',[['queryDetail',['$event']]]]]}}" binddetail="__e"></child-component-name>
queryDetail: function queryDetail(e) {console.log('获取子组件的参数', e)},

10记录：小程序获取屏幕高度

解答：小程序如何获取页面高度 - 小小蚂蚁

// 使用wx.getSystemInfo()方法
onLoad: function onLoad(option) {
        const _this = this;
        uni.getSystemInfo({
          success:function(res){      
            let windowHeight = res.windowHeight;
            console.log("屏幕高度为："+windowHeight);    
          }
        });
     },

9记录：uni-app中调取接口的三种方法

解答：uni-app中调取接口的三种方法 - 代码先锋网

8记录：iview weapp 库

官网地址：https://weapp.iviewui.com/

7记录：小程序页面间传参的五种方式

解答：小程序页面间传参的五种方式实例详解_javascript技巧_脚本之家

PS：入参类型接收时皆为字符串
//跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.switchTab({ url:'/bbb?id=1' })
//关闭所有页面，打开到应用内的某个页面
wx.reLaunch({ url: '/bbb?id=1'})
//关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.redirectTo({ url: '/bbb?id=1'})
//保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
wx.navigateTo({  url: '/bbb?id='+ encodeURIComponent(this.data.id) })
//地址传参带过来的参数只能在该方法的options参数中获取
onLoad:function(options){
    console.log(decodeURIComponent(options.id)) //'1' ,无论传的变量是数字、布尔还是对象接收的时候都是字符串
},

6记录：用全局变量定义环境运行环境

解答：Vue微信小程序和uniapp配置环境地址_vue.js_脚本之家

1 在全局配置文件 app.js 中配置
App({
  globalData: { apiHost: "" }, // 全局变量
  onLaunch: function() {
    // 获取全局信息
    const accountInfo = wx.getAccountInfoSync();
    const envVersion = accountInfo.miniProgram.envVersion;
    let apiHost = "";
    if (envVersion === "develop") {
      apiHost = "http://localhost:9000"; // 配置开发环境地址
    } else if (envVersion === "trial") {
      apiHost = "测试环境地址";
    } else if (envVersion === "release") {
      apiHost = "生产环境地址";
    }
    this.globalData.apiHost = apiHost;
  }
})


2 在其他wxml页面中使用apiHost构建请求URL并发送
const app = getApp();
const apiHost = app.globalData.apiHost; // 获取全局变量
const url = `${apiHost}/api/endpoint`;
wx.request({
  url: url,
  method: 'GET',
  success: function(res) {
    console.log(res.data);
  },
  fail: function(error) {
    console.error(error);
  }
});

5记录： Bad attr wx:else with message: wx:if not found, then something must be wrong.

解答：问题出现的情况是标签中同时存在wx:if和wx:for。

4记录：微信小程序 用iview做城市索引列表以及iview的坑

解答：微信小程序 用iview做城市索引列表以及iview的坑_iview索引选择器怎么使用_川上饺子的博客-CSDN博客

PS：1 使用此组件记得外层加高度height。2第二天发现失效了，情况待梳理。

3记录：wx:key="{{index}}" does not look like a valid key name (did you mean wx:key="index" ?)

解答：代码中书写为wx:key="{{index}}"，应更改为wx:key="index"。

2记录：小程序设置动态标题

解答：

JSON文件的["navigationBarTitleText": ""]设置为空。
跳转的路径加入需携带的参数。接收页在onLoad方法获得参数：
onLoad: function onLoad(options) {
  uni.setNavigationBarTitle({ title: options.title });
},

1记录：从子页面跳转至tabbar标签页，并刷新标签页的内容。

解答：小程序中强制页面刷新 - 代码先锋网

toHome: function toHome(e) {
          let params = { "name": this.brandName + '/'+ e.categoryName };
          uni.setStorage({
              key: 'brandSelected',
              data: params,
              success: function success() {
                  uni.switchTab({ url: '/pages/tabBar/home/home',
                  success(){
                      let page = getCurrentPages().pop();  
                      if( page == undefined || page == null ) return;
                      page.onLoad()
                  } });   

                   // or 通过getCurrentPages返回时刷新当前页面数据
                   // if (getCurrentPages().length != 0) {
                        //刷新当前页面的数据
                       //getCurrentPages()[getCurrentPages().length - 1].onLoad()
                   //}   
              } 
          });
      }