微信小程序开发二

标签：无分类：未分类创建时间：2023-09-11 14:21:14 更新时间：2025-01-17 10:39:23

1.获取用户信息

获取用户信息的接口，改来改去，结果就是代码要一点点的改，真是烦死了。
（1）开始的时候，我用的是 getUserInfo 获取信息
（2）2022年10月，后来开始用 getUserProfile 接口
（3）2023年10月，后来我才发现，getUserProfile 接口也不能用了，只能用头像昵称填写能力了，我真是有些生气了。

<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
    <text class="avatar-text" wx:if="{{!hasAvatar}}">请选择头像</text>
    <image class="avatar" src="{{avatarUrl}}"></image>
</button> 

<view class="nickname-wrap">
    <text>昵称:</text>
    <input type="nickname" class="weui-input" placeholder="请输入昵称" bindinput='getInputValue'/>
</view>

const app = getApp()

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page({
    data:{
        disable:false,
        loading:false,
        avatarUrl: defaultAvatarUrl, // 头像
        hasAvatar:false, // 是否选择了头像
        nickname:"", // 昵称
        avator:"", // 头像地址
    },
    onChooseAvatar(e) {
        const { avatarUrl } = e.detail 
        this.setData({
            avatarUrl,
            hasAvatar:true
        })
        // 上传
        this.uploadImgs('/mapdata/wxuser/uploadAvatar', avatarUrl, (res) => {
            let baseAPIUrl=app.globalData.baseAPIUrl;
            let url=baseAPIUrl+"/mapdata/wxuser/preview/"+res.message;
            this.data.avator=url;
        }, (err) => {
            console.log(err)
        })
    },
    /**
     * 获取输入框的值
     */
    getInputValue(e){
        let input=e.detail;
        this.data.nickname=input.value;
    },

    /**
     * 文件上传
     * @param {*} uploadUrl 
     * @param {*} filePath 
     * @param {*} successCallback 
     * @param {*} errorCallback 
     */
    uploadImgs(uploadUrl, filePath, successCallback, errorCallback) {
        let that = this;

        let env=getEnv();
        let baseAPIUrl=env.GLOB_DOMAIN_URL;
        let globalUserInfo=app.globalData.userInfo||{};
        let token = globalUserInfo.token||"wxapp";

        wx.uploadFile({
            url: baseAPIUrl + uploadUrl,
            filePath: filePath,
            fileType: 'image',
            name: 'file',
            formData: {
                'biz': 'avatar'
            },
            header: {
                "Content-Type": "multipart/form-data",
                "X-Access-Token":token
            },
            success: (res) => {
                that.loading=false;

                if (res.statusCode == 403) {
                    wx.showToast({
                        title: res.data,
                        icon:"none"
                    });
                } else if (res.statusCode == 413) {
                    wx.showToast({
                        title: '上传图片失败,请重新上传小尺寸图片',
                        icon:"none"
                    });
                } else {
                    let data = res.data ? JSON.parse(res.data) : {};
                    if (data.code === 0 && data.success === true) {
                        successCallback && successCallback(data)
                    } else {
                        errorCallback && errorCallback(data);
                        wx.showToast({
                            title: data.message,
                            icon:"none"
                        });
                    }
                }
            },
            fail: (err) => {
                that.loading=false;
                console.log(err);
                showErrorMsg("头像信息上传失败！");
            }
        })
    },
})

参考文章:
1.微信小程序获取用户基本信息的几种方式
2.wx.getUserInfo(Object object)
3.微信小程序获取openid的两种方法两种方式实现获取用户信息。
4.小程序登录登录凭证校验。通过 wx.login 接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程。
5.小程序用户头像昵称获取规则调整公告自 2022 年 10 月 25 日 24 时后（以下统称 “生效期” ）自生效期起，小程序 wx.getUserProfile 接口将被收回.
6.微信小程序登录获取不到头像和昵称解决办法！微信小程序登录获取不到头像和昵称主要原因是：小程序wx.getUserProfile接口被收回！大家可以按照文档操作↓
7.微信小程序使用头像昵称填写完成头像上传

问题
（1）上传的头像file为空
这个问题是因为我在设置 uploadFile 参数的时候，这个name设置成为了 pic ,但是我后台接受文件的时候用的是 multipartRequest.getFile(“file”); 导致找不到这个 file 文件。

wx.uploadFile({
  url: baseAPIUrl + uploadUrl,
  filePath: filePath,
  fileType: 'image',
  name: 'pic'
})

2.自动切换环境配置

在小程序开发的时候，需要配置是否校验接口域名，在后台进行了配置之后，也还是可以进行请求的，但是如果要在本地进行配置自动切换怎么做呢？经过我多次查看，主要有两个地方去判断

（1）调用 wx.getSystemInfoSync() 函数，获取其中的信息判断 host 值，在开发者工具中这个值不存在（存疑）。
（2）调用 wx.getAccountInfoSync() 接口，判断 envVersion 值，

2023年09月12日，好像还是不行，到目前为止还是只能手动修改接口地址，然后提交审核。

参考文章:
1.微信小程序：本地开发环境和线上环境配置这里通过调用 wx.getSystemInfoSync() 获取host，判断有没有，但是实际上在开发者工具中，这个值也是存在的。
2.原生小程序根据当前版本自动切换开发版本、体验版本、正式版本接口地址这个在提审时有跟问题，提审的版本会认为是develop版导致请求的数据是测试版的。然后被审核拒绝。
3.Object wx.getAccountInfoSync() 获取当前账号信息。线上小程序版本号仅支持在正式版小程序中获取，开发版和体验版中无法获取。
4.【陈年BUG】能否解决小程序审核版调用wx.getAccountInfoSync()获取env的问题这个问题一直到 2023年09月12日好像还是没有解决，就是在审核的时候，还是返回了 develop 这个状态，而不是 release 状态。
5.wx.getSystemInfoSync() 开发工具获取不到host 真机调试有但是没appid?

3.短信链接跳转到小程序

(1) 生成小程序的URL Scheme，进入小程序管理后台，选择“工具-生成URL Scheme”。
这个生成 URL Scheme 的功能进行了调整，变成了从后端生成。除此之外，还多加了很多的限制：

1.每个 URL Scheme 或 URL Link 有效期最长 30 天，均不再支持永久有效的链接、不再区分短期有效链接与长期有效链接；
2.链接生成后，若在微信外打开，用户可以在浏览器页面点击进入小程序。每个独立的链接被用户访问后，仅此用户可以再次访问并打开对应小程序，其他用户无法再次通过相同链接打开该小程序；
3.单个小程序每天生成链接数（URL Scheme 和 URL Link 总数）上限为 50 万条。

(2) 编写网页将URL Scheme填入其中，比如：

1	location.href = 'weixin://dl/business/?ticket= TICKET'

(3) 发送一个h5的网页链接给用户，链接中填写网页的url地址。

(4) 用户点击短信中的url，跳转到网页，然后从网页打开微信小程序。

参考文章:
1.短信链接跳转微信小程序的三种方式
2.短信链接点击跳转到微信小程序
3.微信小程序新能力：URL Scheme，可从短信跳转小程序这里提供了一个网页内容，可以直接使用。
4.小程序后台工具下拉没有生成URL Scheme
5.小程序链接生成与使用规则调整公告这个公告也是一片骂声啊
6.获取scheme码

4.获取用户位置

（1）getLocation
通过 getLocation 获取用户的位置信息。

（2）onLocationChange
通过 onLocationChange 监听用户位置变动的方法，结合 starLocationUpdate 使用

const _locationChangeFn = (res) => {
  console.log('location change', res)

}
wx.startLocationUpdate({
  success: () => {
    wx.onLocationChange(_locationChangeFn)
  },
  fail: (err) => {
    console.log(err)
  }
})

(3) 全局配置app.json

"requiredPrivateInfos": [ 
  "getLocation",
  "onLocationChange",
  "startLocationUpdate"
],

参考文章:
1.wx.onLocationChange搭配wx.startLocationUpdate的使用方法这个简单，就是调用了 onLocationChange 和 offLocationChange 方法。
2.微信小程序使用 wx.onLocationChange() 这是有一个例子，使用了异步的方法进行获取。
3.全局配置
4.接口未正确配置：wx.getLocation，但是我正确配置了，怎么搞？
5.微信小程序后台持续定位功能使用

5.引入第三方组件

以安装moment.js为例。
（1）安装 momnet.js

1	npm install moment --save

(2) 点击微信开发者工具菜单栏，选择工具->构建 npm，进行构建，然后在工程目录下，就有了 miniprogram_npm 文件，里面包含了需要的依赖包。

(3) 引用 moment.js

import moment from 'moment'
Page({
  onLoad () {
    console.log(moment(new Date()))
  },
})

参考文章:
1.微信小程序使用 npm 安装 moment
2.微信小程序引入第三方UI组件

6.封装wx.request为同步

很多的东西都是异步的，之后我暂时用了回调函数的方式进行统计的。

参考文章:
1.微信小程序开发之异步转同步
2.将小程序原生异步函数promisify后，在async/await中使用
3.微信小程序：封装wx.request同步请求
4.微信小程序封装wx.request请求

7.云开发

微信云开发，每一个月都要最基础的也要19块钱的费用，后来我就干脆直接关闭了，直接用后台数据库好了。关闭云开发
（1）首先打开云开发控制台
（2）进入控制台后，选择“设置”
（3）在设置里点击环境名称，再点击“管理我的环境”
（4）会在右侧打开环境管理，点击删除即可
（5）再用管理员微信扫码确认下就行了，

参考文章:
1.微信小程序如何关闭云开发

8.视频直播

使用 live-player 组件可以进行 rtmp 的直播。

参考文章:
【1】.微信小程序音视频与WebRTC互通的技术思路和实践这里对比了小程序中自带的播放的直播组件和webrtc的关系问题。
【2】.live-player 暂只针对国内主体如下类目的小程序开放，需要先通过类目审核，再在小程序管理后台，「开发」-「接口设置」中自助开通该组件权限。

往期推荐

文章目录

微信公众号

广告位

诚心邀请广大金主爸爸洽谈合作

每日一省

isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

每日二省

为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

每日三省

== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

每日英语

Happiness is time precipitation, smile is the lonely sad.

幸福是年华的沉淀，微笑是寂寞的悲伤。