uni-app开发微信小程序踩坑

fake_smiler
1,825 阅读4分钟

一、<navigator url=''></navigator>跳转无反应失效问题

​1、路径与tabBar路径相同，设置open-type="switchTab"

​2、路径为绝对路径或是相对路径 /pages/index/index或是 ../index/index

二、授权获取用户信息

​1、

    <button type="primary" open-type="getUserInfo" @getuserinfo="getUserInfo">微信账号登录/注册</button>	

    getUserInfo(infoRes) {
        console.log('用户昵称为：' + infoRes.userInfo.nickName);
    }

​2、wx.getUserProfile每次调用都会弹起授权弹窗

    wx.getUserProfile && wx.getUserProfile({ 
        lang: 'zh_CN',
        desc: '注册',
        success: function(res) {
       		console.log(res, 'succ')
        },
        complete: function(res) {
        	console.log(res)
        }
    })

三、获取用户手机号

​1、首先账户主体必须是经过企业认证和微信认证的小程序，只有经过认证的小程序才有权限获取手机号，调起授权页面

​2、使用按钮获取微信授权手机号

    <button open-type="getPhoneNumber" @getphonenumber="getWIXphone">获取微信手机号</button>

    // 获取手机号
    getWIXphone(data) {
        uni.login({
            provider: 'weixin',
            success: (res) => {
                uni.request({
                    url:'' , //此处路径请求后端接口,使用code换取session_key,openId等
                    code:res.code,
                    success:(res)=>{
                        if(res.openId){

                        }
                    }
                })
            }
        });
    },

3、按钮绑定的方法会获取到加密的手机号

  1. 第一步：使用wx.login()或是uni.login() 获取微信code；
  2. 第二步：使用code 调用后端的接口进行登录，获取openid
  3. 第三步：使用openid+加密手机号，调取后端接口进行解密

四、uni调用微信小程序第三方插件 实例 ocr

​1、请在小程序后台搜索本插件（AppID=wx4418e3e031e551be） 设置-第三方服务-添加插件 image-20210315173012185.png ​2、前往微信服务平台购买，appid内的额度在插件、API、服务市场是通用的。示例：ocr 0元购买100次/每天/ 10年 ​3、在uni-app的manifest.json 中找到 mp-weixin加入以下代码

    "plugins": {
            "ocr-plugin": {
                    "version": "3.0.6",
                    "provider": "wx4418e3e031e551be"
            }
    },

​4、在pages.json 中globalStyle下加入

    "usingComponents": {
        "ocr-navigator": "plugin://ocr-plugin/ocr-navigator"
    }

​5、在页面中使用代码如下

    <ocr-navigator @onSuccess="success" certificateType="idCard" :opposite="false">
        <button type="primary">身份证正面识别</button>
    </ocr-navigator>
    
    <ocr-navigator @onSuccess="success" certificateType="idCard" :opposite="true">
        <button type="primary">身份证反面识别</button>
    </ocr-navigator>
    
    <ocr-navigator @onSuccess="success" certificateType="bankCard">
        <button type="primary">银行卡识别</button>
    </ocr-navigator>

​6、注意代码中千万不要出现 类名main-container的样式。。。

五、scss/less 语法报错

​1、插件未安装

​2、引入scss文件的style未加lang='scss'

六、uni在小程序点击阻止事件冒泡

​@click.stop

七、关于页面返回刷新上一个页面

1、在storage或getApp().globalData 或vuex 中定义全局变量来控制是否刷新（以getApp().globalData为例,从B页面返回A页面刷新），该方法在小程序使用左上角返回也可以触发刷新

    //A页面
    onShow() {
        const {refresh} = getApp().globalData
        if(refresh){
            this.init()//初始化页面，请求接口
            getApp().globalData.refresh = false
        }
    },

    // B页面需要返回刷新的方法中
    
    getApp().globalData.refresh = true

2、利用getCurrentPages获取页面栈，重置onload函数实现刷新

export function reNavigateBack(i) { // i为返回第几个页面，页面必须为已经打开过的，存在于当前页面栈 。number
    try {
        var pages = getCurrentPages(); //当前页面栈
        if (pages.length > 1) {
            var beforePage = pages[pages.length - 1 - i]; //获取页面实例对象,pages.length - 1
            为当前页面位置
            beforePage.onLoad(); //触发父页面中的方
        }
        uni.navigateBack({
            delta: i,
            success: () => {
                    // console.log('navigateBack success')
            },
            fail: () => {
                    console.log('navigateBack fail')
            }
        })
    } catch (e) {
        console.warn('reNavigateBack err')
    }
}

// 使用js

import { reNavigateBack } from '/utils/index.js'  

this.reNavigateBack(1)

八、小程序利用web-view嵌入h5，并实现交互

添加微信SDK,添加uniSDK,可调取部分uni API 和 weixin api

注意：使用uni-api必须同时上传微信 SDK和uni SDK。

    <!-- weixin 的 SDK -->
   <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <!-- uni 的 SDK -->
    <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-
    app/uni.webview.1.5.2.js"></script>

image-20210405141631934.png

九、小程序分享网络图片到好友，保存本地，收藏等功能

image-20210405175842704.png

// 1、获取图片信息 拿到图片本地临时路径 参数为获取的网络图片路径，必须是备案过的域名，并且在小程序管理平台配置
getImageInfo(url) {
    uni.getImageInfo({
        src: url,
        success: (image) => {
            console.log(image)
            this.showShareMenu(image.path)
        },
    });
},

// 2、调用图片分享弹窗  uni没找到使用wx官网的api 注意兼容

showShareMenu(url) {
    wx.showShareImageMenu({
        path: url,
        success: (res) => {
            if (res.errMsg === "showShareImageMenu:ok") {
                setTimeout(() => {
                    uni.showToast({
                            title: '分享成功',
                            icon: 'success'
                    })
                }, 500)
            }
        },
        complete: (res) => {
            // if (res.errMsg === "showShareImageMenu:fail cancel") {
            uni.navigateBack({
                    delta: 1
            })
            // }
        }
    })
},

十、关于测试小程序体验包

1、微信开发者平台点击上传代码

2、在小程序管理平台-->版本管理可以看到生成的开发版本

3、点击选为体验版本，生成体验二维码

image-20210413175536254.png 4、体验成员必须是小程序管理平台添加过的体验成员

5、关于体验环境跨域，点击微信右上角胶囊，弹窗选择打开调试模式

十一、关于上线

1、使用HbuilderX发行微信小程序，会在当前目录生成unpackage文件夹，会自动打开微信开发者工具

2、点击微信开发者工具上传按钮，将代码上传 3、登录小程序管理后台

image-20210413174249075.png 开发--->开发管理--->开发设置---->服务域名配置（必须是备案过的https域名）

使用web-view嵌入H5的配置业务域名（必须是备案过的https域名）

image-20210413174753606.png

image-20210413174845365.png

4、点击版本管理能看到刚才上传的代码，先提交审核，审核通过就可以发布

avatar
文章
阅读
粉丝