前言 在8月15日当天我分享了一篇《微信小程序深度合成类目资质如何准备？》，发完文章后有很多朋友私信我，发现有很人和我遇到了同样的问题，这个问题我昨天已经解决了，接下来分享下具体流程和材料。 [图片] 准备材料 最开始需要《安全评估报告》现在已经不需要了，最新的只有自己的AI大模型算法备案或者合作的AI达模型算法备案+合作协议。 第一种方式 在《微信小程序深度合成类目资质如何准备？》这篇有人留言（我没有询问过待办机构，我用的是合作的方式）。 [图片] 不建议这种方式，费用虽然不多，但是时间太久了，等办下来可能产品竞争力就没了。 第二种方式 算法备案证明截图 找市面上已经有AI模型算法备案的公司合作，比如：通义千问（阿里巴巴）、文心一言（百度）、讯飞星火（科大讯飞）等，那么怎么知道公司有没有算法备案？直接在「互联网信息服务算法备案系统」通过公司名称查找。 如：百度 [图片] 我们可以看到这里面就可以查看算法为「生成合成类」的算法备案信息为「正常」状态。 合作协议 确定有算法备案后找相关产品的商户去谈合作，看具体条件和签合同流程（在这里我不做任何公司的推荐，大家根据自身业务需求去体验下已备案的产品，然后再做判断） 在这里要注意合同中要包含算法备案证明截图中的【算法名称】双方公司都需要盖公章。 最后 当然具体你要用什么方式根据自己的实际情况决定，我就是用的第二种方式提供这两个材料就申请通过，最后祝大家都申请通过，产品顺利上线！

官方公告地址： https://developers.weixin.qq.com/community/develop/doc/00042e3ef54940ce8520e38db61801 目前，开发工具或者体验版的小程序，调试基础库如果是2.33.0及以上就得适配了，线上版本9月15日之后生效，所以这之前需要尽快改完，发布一版，否则到了9月15号之后 线上就会生效报错了。 其实改起来也很简单，以下是实现步骤和代码： 1、首先看一下这个网址，里边包含涉及到的隐私的接口，这些接口都要适配一下 https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/miniprogram-intro.html [图片] 在以上接口用到的页面，需要画一下类似上边的弹窗（这个弹窗可以全局定义个组件，方便多个页面共用），然后里边蓝字可以点击后调用wx.openPrivacyContract(Object object)接口即可，会自动跳转打开隐私协议页面。 拒绝按钮可以加一个点击事件，然后在事件里这样写 [图片] 同意按钮比较特殊，布局需要用button这样写，记得给button加一个Id [图片] 然后在handleAgreePrivacyAuthorization里就可以获取到点击事件，这样写 [图片] 2、最后需要在onLoad或者onShow里加上以下监听代码，在这里边让自定义的隐私弹窗显示出来即可。 [图片] 以上代码加上就可以了，如果业务逻辑用到了需要判断是否授权过，可以加上 wx.getPrivacySetting(Object object)去获取是否授权过，用不到可以不加这个判断。

原文链接：https://juejin.cn/post/7103102468266917924欢迎到掘金关注我：猪痞恶霸 场景实战登录进行云开发让我感触最深的就是登录模块了，我们来对比一下云开发和非云开发登录的流程非云开发登录调用[代码]wx.login()[代码]获取[代码]code[代码]调用[代码]wx.request()[代码]将[代码]code[代码]发送到我们自己的服务器服务端需要凭借[代码]appID[代码],[代码]appsecret[代码],[代码]code[代码]通过微信接口服务拿到[代码]session_key[代码]与[代码]openid[代码]将登录状态返回给小程序，小程序再其存储到[代码]storage[代码]中云开发登录调用login云函数，即可拿到[代码]openid[代码]这仅仅只是登录步骤的区别，其实就是少了中间商赚差价，云开发没有了中介，所以就少了繁琐的步骤，我们来实际看一下云开发登录的实现 在云函数目录下创建一个login的云函数并部署到云端调用[代码]wx.getUserProfile[代码]获取用户的头像与昵称信息（自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息）存储用户基本信息在[代码]storage[代码]中调用云函数[代码]login[代码]存储调用登录云函数拿到的[代码]openid[代码]到[代码]storage[代码]wx.getUserProfile({desc: '用户完善会员资料'}) .then(res => {      wx.setStorageSync('userInfo', res.userInfo)      wx.cloud.callFunction({name: 'login',})         .then(res => {               this.setData({                   openid: res.result.openid               })           wx.setStorageSync('openid', res.result.openid)           }) }) 收藏收藏功能在很多应用中都很常见，商品收藏，小说收藏，文章收藏，等等大致分为三个模块，分别为：加入收藏，收藏列表，取消收藏首先需要先建立一个[代码]collect[代码]收藏集合，并将这个集合的数据权限设置为仅创建者可读写。 加入收藏将一本书加入用户收藏，那么则需要我们将书的信息，与用户openid作为一个数据记录加入我们的[代码]collect[代码]集合中 wx.cloud.database().collection('collects').add({                data: {                    title: this.data.title,                    intro: this.data.intro,                    img: this.data.img,                    isCollect: true,               },                success: res => {               }           }) 需要注意的是，我们无需手动地去添加openid这个字段，因为在用户添加地过程中会自动附加上用户的openid，非常好用，在加入收藏后，我们就可以在我们的数据集合中看到我们加入的书本，其额外多的是唯一标识_id与用户_openid。 收藏列表获取用户的收藏列表，只需要我们通过_openid这个数据条件获取用户的收藏书本信息 锁定集合[代码]collection('collects')[代码]筛选数据[代码]where()[代码] wx.cloud.database().collection('collects').where({                _openid: openid           }).get().then(res => {}) 取消收藏取消用户收藏，与加入收藏异曲同工，只要将add操作替换为remove操作，将查询信息更改为[代码]opneid[代码]与书本名 wx.cloud.database().collection('collects').where({            _openid: openid,            title: this.data.title       }).remove({            success: res => {} }) 内容详情商品详情信息，书本内容，等等场景都需要内容的加载渲染我在我的项目中将wxparse进行了二次组件封装，简单的使用可能太过臃肿，下面我概述了封装的步骤项目中组件目录下的prebuild为封装的组件，大家可以参考使用解析器组件封装解析器为开源wxparse，原作者已经不再维护，github地址：wxParse-微信小程序富文本解析自定义组件，支持HTML及markdown解析 将项目中的wxParse文件引入到项目根目录中封装一个文本解析组件在组件的wxml文件中引入<import src="/wxParse/wxParse.wxml" /> 在组件的wxss文件中引入@import "/wxParse/wxParse.wxss"; 在组件的js文件中引入import wxParse from "../../wxParse/wxParse.js"; 定义组件属性，根据wxparse提供的参数项，定义我们解析器组件所需要的属性 properties: {    bindName: {      type: String   },    type: {      type: String,      value: "html"   },    data: {      type: String   },    imagePadding: {      type: Number,      value: 0   } }, bindName绑定的数据名(必填)type可以为html或者md(必填)data为传入的具体数据(必填)target为Page对象,一般为this(必填)magePadding为当图片自适应是左右的单一padding(默认为0,可选)封装一个解析方法，根据我们设定的组件属性进行解析，并在其中将解析好的内容即[代码]nodes[代码]响应式设置为数据[代码]value[代码]build() {      let { bindName, type, data, imagePadding } = this.properties;      wxParse.wxParse(bindName, type, data, this, imagePadding)      this.setData({        value: this.data[bindName].nodes     })   }, 在组件的wxml中使用数据渲染组件[代码]template[代码]<template is="wxParse" data="{{wxParseData:value}}" /> 解析器组件使用封装好解析器组件后，其与正常组件的引入使用方式相同正如下面，我们只需要在拿到我们的html或者md字符串后调用[代码]this.selectComponent('#preContent').build()[代码]，这种无脑传入我们的插值数据即可完成渲染，非常好用。 <pre-build id="preContent" bindName="{{title}}" data="{{content}}"/> 多种数据解析问题如果你的应用需要出现不同种类的文本解析情况，那么就需要考虑这个问题，比如我需要解析出：资讯详情，新闻详情，百科详情，三种详情，那么会不会就有人去app.json初始化三个详情页，我猜肯定会有人这么干，下面我来提供我的思路 页面传参进行工厂化处理 下面是我们的路由跳转传参函数，将数据获取的id作为一个参数，将要获取数据的数据集合作为一个参数即cont goCont:function(e) {    let data = e.currentTarget.dataset        wx.navigateTo({            url: '../cont/cont?id=' + data.id+'&port='+data.cont       })   }, 在onload生命周期中获取到路由参数进行调用即可自由得获取任何数据集合中得内容 let { id, port } = options wx.cloud.database().collection(port).where({_id:id}) 自定义tabbar与headbar不同的场景有不同的需求，我们需要自己封装tabbar或headbar来达到我们的效果tabbar封装与使用官方文档给出了tabbar封装说明：自定义 tabBar | 微信开放文档 (qq.com)，下面我具体说一下我的封装和使用步骤 在官方文档中下载封装的tab项目示例，得到[代码]custom-tab-bar[代码]文件将文件存放在自己项目的根目录中在[代码]app.json[代码]更改tab配置 "custom": true, 在app.json中配置全局组件"usingComponents": {        "x-tabbar": "./custom-tab-bar/index" }, headbar的封装与使用head组件的封装和普通组件的封装方法相同，只不过因为有右上角胶囊的存在，所以是要计算不同机型的高度来进行适配 大概的步骤就是： 在需要使用headbar的页面组件进行[代码]json[代码]配置"navigationStyle": "custom" 引入head组件"usingComponents": {    "Header": "/components/headBar/headBar" }, 应用<Header  backHomeFlag customTitle="详情"></Header> 具体demo大家可以参考项目组件目录中的headBar组件文件与我之前总结的headbar封装和使用方法：微信小程序head组件的封装与使用 - 掘金 (juejin.cn) 换肤项目有跟随季节换肤的功能，跟随季节的改变更换主题颜色与资源，当然这里我是手动更改了月份。[图片] 全局变量的使用这个需求肯定是需要存储season作为全局变量，在每个组件内进行使用在[代码]app.js[代码]中预设全局变量globalData: {        season: 'spring'   }, 在初始化的生命周期中进行季节判断与赋值const app = getApp() app.globalData.season = 'spring' 具体实现步骤在onload生命周期中获取全局变量并设置季节值const app = getApp(); this.setData({    season: app.globalData.season }) 预设好[代码]class[代码]，比如[代码]spring-text[代码]，[代码]autumn-text[代码]插值进行类的变换实现换肤效果<text bindtap="read" class="{{season}}-text">点击阅读</text> 封装一个获取季节的全局方法每个页面都需要进行季节值的获取与设置，那我们不如使用util来封装一个工具函数 在utils文件目录下的util文件，声明一个获取季节的方法const setSeason = (that) => {    const app = getApp();    that.setData({        season: app.globalData.season   }) } 将这个方法暴露出去module.exports = {    setSeason } 在我们所需要的页面进行调用let util = require('../../utils/util.js') let that = this util.setSeason(that) 非常好用！！！ icon的更换由于tab组件的特殊性，其icon需要在data里进行配置，而如果我们通过[代码]if else[代码]判断季节，再使用[代码]setData[代码]做出改变的话很不优雅，所以我们可以采用模板字符串的形式，即可完成tabbar的icon更迭。 list: [{            selectedIconPath: `../images/tabicon/${season}-home-active.png`,            iconPath: `../images/tabicon/spring-home.png`,            pagePath: "../home/home",            text: "首页"       }] 如果我们使用[代码]if[代码]和响应式替换的话，看起来就很冗余 if(season === "spring") {    this.setData({         list:[{            selectedIconPath: "../images/tabicon/spring-home-active.png",            iconPath: "../images/tabicon/spring-home.png",            pagePath: "../home/home",            text: "首页"       }]   }) }else { // ........... } 首屏渲染谈起首屏渲染肯定是应用优化中重要的部分，而小程序开发者工具中自动生成骨架屏的工具大大地减少了开发者的工作，只需要几步就可以生成对应页面的骨架屏文件，具体实战步骤可以参考我的这篇文章微信小程序实战之骨架屏的应用与实现 - 掘金 (juejin.cn)里面详细概述了微信小程序骨架屏的使用方法和使用注意事项 触底加载与下拉刷新因为涉及到卡片列表所以触底加载和下拉刷新的实现是必要的，通过灵活使用[代码]limit()[代码]和[代码]skip()[代码]来进行集合特定区间内数据记录的获取，来达到我们的目的，具体实战步骤可以参考我的这篇文章小程序触底加载与下拉刷新功能的设计与实现 - 掘金 (juejin.cn)里面详细讲解了我在这个项目中实现触底加载和下拉刷新的过程。 部署上线大概的上线流程如下在开发者工具中上传我们的代码检查我们调用的api，比如我用到了位置信息，那么我们就需要去公众平台的开发部分的接口管理部分进行一个接口申请申请用户协议提交审核（不进行上面的步骤就会被驳回，我当时被驳回了好几次）通过后即可部署上线使用