美文网首页
使用uniapp开发微信小程序基本流程及问题记录

使用uniapp开发微信小程序基本流程及问题记录

作者: 浪味仙儿啊 | 来源:发表于2023-11-02 13:44 被阅读0次

第一次写小程序,遇到了很多问题,便想记录下来。
在这里对小程序注册就不做过多赘述。
如有问题,欢迎指正。

分包

在开发小程序前,最好先根据自己开发的功能模块或其他逻辑做好分包,不然后期在上传代码时报错才发现这个问题,再去分包就很麻烦。小程序限制每个包不超过2M,可以分9个子包,总包大小不超过20M。



pages是主包,里面放置默认启动页面/TabBar页面,目录名为page_开头的都是分包。

分包步骤

开启分包优化

使用分包之后会发现子包的组件和js文件会被打包到主包的vendor.js文件中,这就导致了vendor.js过大引起主包超过2M(在微信开发者工具中可查看)



这时就需要开启分包优化:打开manifest.json→源码视图在mp-weixin节点下,添加如下代码

"optimization" : {
            "subPackages" : true
        }

开启之后重新发布打包微信小程序,分包的js文件将不会再打包到主包的vendor.js中了。

在pages.json中配置路径

在pages.json中添加subPackages数组,切记要放在pages后面,否则无法生效。


隐私保护设置

在2023年10月30日发现小程序中所有上传图片处点击无反应,无法换起从手机选择图片或拍照上传功能(之前可以正常使用)。


在查询搜索之后发现是隐私保护配置的问题,下图为微信官方文档中的截图,具体内容可进入页面查看
https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html

以下为隐私保护设置步骤:

在微信公众平台中找到设置

基本设置中找到服务内容声明,更新用户隐私保护指引

根据需要使用的功能设置隐私协议


设置完成后生成即可使用功能

当然上传图片的域名也需要再微信公众平台中配置好


扫描普通二维码,进入小程序

在微信公众平台中开发管理→开发设置→扫普通链接二维码打开小程序进行配置,小程序需发布方可使用



同时代码中的路径需要保持一致

<view class="qrimg">
   <tki-qrcode ref="qrcode" :cid="cid" :val="scanUrl" :size="400" :onval="true" :loadMake="true" :usingComponents="false" loadingText="二维码生成中" @result="qrR" />
</view>
<script>
    import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
    export default {
        components: {
            tkiQrcode
        },
        data() {
            return {
                cid: 'tki-qrcode-canvas', // 二维码唯一ID
                src: '', // 二维码生成后的图片地址或base64
                user: {
                    id: '',
                    name: '',
                },
                scanUrl: ''
            };
        },
        onLoad(option) {
            const item = JSON.parse(decodeURIComponent(option.user));
            console.log('item', item)
            this.user.id = item.id
            const name = item.name.replace(/"/g, '');
            if (name === 'null') {
                this.user.name = ''
            } else {
                this.user.name = name
            }
            this.scanUrl = 'https://*****.cn/?doctorId=' + this.user.id
        },
        methods: {
            qrR(e) {
                console.log('e', e)
                console.log('this.scanUrl', this.scanUrl)       
            }
        }
    }
</script>

体验版缓存问题

发现该问题是因为在测试阶段,内部人员有限,需要时不时删除数据再重新下拉最近使用的小程序测试,就导致原来的小程序中缓存了数据,但实际数据已删除,产生数据问题,页面加载出错,开发人员以为是代码问题,排查了很久,才知道目前微信小程序不支持在体验版里获取版本号,来判断是否有版本更新,正式版里可以做到判断版本更新后自动清除缓存,所以在体验版里只能由用户手动清除缓存再重新扫描体验版二维码进入。


uni.navigateTo改为uni.navigateBack

开发中遇到一个问题从A页面进入B页面,B页面进入C页面,C页面返回B页面需要携带参数,之前我使用的是uni.navigateTo

uni.navigateTo({
    url: '/page_addFollowupSummary/addFollowupSummary/addFollowupSummary?item=' + encodeURIComponent(JSON.stringify(item)) + '&from=' + 'followupSummaryTemplate'
})

从C页面返回到B页面,期望再点击返回按钮从B页面回到A页面,但这时B页面的上一个页面是C页面,就导致回到了C页面,形成了循环,我首先错误的想到去修改返回的页面栈,getCurrentPages()可以获取当前页面栈的实例,以数组形式按栈的顺序给出,数组中的元素为页面实例,第一个元素为首页,最后一个元素为当前页面。但我发现,不仅不能修改,且官方也不推荐修改。



所以后面改成了使用uni.navigateBack,将需要使用到的参数先缓存,在B页面获取使用完之后再清除,完美解决该问题。

//C页面
addTemplate(item) {
        uni.setStorageSync('params',item)
        uni.navigateBack()
}
//B页面
onShow(){
        let params = uni.getStorageSync('params'); // 读取参数值
        this.messageContent = params.value;
        uni.removeStorageSync('params');
}

未完待续......

相关文章

网友评论

      本文标题:使用uniapp开发微信小程序基本流程及问题记录

      本文链接:https://www.haomeiwen.com/subject/tgknidtx.html