在微信小程序的前端开发中，使用this.setData方法修改data中的值，其格式为 this.setData({    '参数名1': 值1,    '参数名2': 值2 )}     需要注意的是，如果是简单变量，这里的参数名可以不加引号。     经过测试，可以使用3种方式对data中的对象、数组中的数据进行修改。 假设原数据为： data: { user_info:{ name: 'li', age: 10     },     cars:['nio', 'bmw', 'wolks'] },      方式一：      使用['字符串']，例如 this.setData({       ['user_info.age']: 20, ['cars[0]']: 'tesla' }) 方式二：     构造变量，重新赋值，例如     var temp = this.data.user_info     temp.age = 30      this.setData({ user_info: temp     })     var temp = this.data.cars     temp[0] = 'volvo'      this.setData({ cars: temp }) 方式三：      直接使用字符串，此种方式之前不可以，现在可以了，估计小程序库升级了。     注意和第一种方法的对比，推荐还是使用第一种方法。 this.setData({       'user_info.age': 40,       'cars[0]': 'ford' }) 完整代码： Page({ /** * 页面的初始数据 */ data: { user_info:{ name: 'li', age: 10 }, cars:['nio', 'bmw', 'wolks'] }, change_data: function(){     console.log('对象-修改前：', this.data.user_info)      this.setData({ ['user_info.age']: 20     }) console.log('对象-修改后1：', this.data.user_info)     var temp = this.data.user_info     temp.age = 30 this.setData({ user_info: temp     }) console.log('对象-修改后2：', this.data.user_info) this.setData({ 'user_info.age': 40     }) console.log('对象-修改后3：', this.data.user_info)     console.log('数组-修改前：', this.data.cars)      this.setData({ ['cars[0]']: 'tesla'     }) console.log('数组-修改后1：', this.data.cars)     var temp = this.data.cars     temp[0] = 'volvo' this.setData({ cars: temp     }) console.log('数组-修改后2：', this.data.cars) this.setData({ 'cars[0]': 'ford'     }) console.log('数组-修改后3：', this.data.cars)   } }) 效果： [图片]

最近微信小店开放了，赶着微信全面开放之前，把自己的小程序开源出来给大家使用～ 小程序效果 [图片] [图片] [图片] 开发心得 如何在项目中集成云开发 一开始项目并非基于云开发而开发的，目前考虑用云开发，因此，需要在项目中开启云开发的相关选项。 首先，在小程序文件夹中建立 [代码]cloud[代码] 文件夹，并在package文件中配置，建立用户登录的云函数并上传到微信小程序云中。相关的操作可以参考官方文档。 我在项目目录中添加了 [代码]cloud[代码] 和 [代码]miniprogram[代码] 两个目录，并在 [代码]project.config.json[代码] 文件夹进行配置 [代码]{ "miniprogramRoot": "./miniprogram" "cloudfunctionRoot": "./cloud/" } [代码] 开通云开发 配置完成后,可以点击控制台中的「云开发」来开通云开发。 [图片] 在云开发的界面中配置，并开通云开发。 [图片] 开通数据库集合 云开发不会自动创建数据库集合，因此，你需要手动创建集合。分别创建 店铺表Seller、分类表Category、商品表Food、订单表Order、地址表Address、用户表*_User*。 [图片] 数据操作 有了数据库的表后，就可以在代码中对数据进行操作了。 下方是我进行目录操作的代码。 [代码]const db = wx.cloud.database() const { showModal } = require('../../utils/utils') Page({ onLoad: function(options) { // 管理员认证 getApp().auth() if (options.objectId) { // 缓存数据 this.setData({ isEdit: true, objectId: options.objectId }) // 请求待编辑的分类对象 db.collection('Category') .doc(options.objectId) .get() .then(res => { // 获取分类信息 this.setData({ category: res.data }) }) } }, add: function(e) { var form = e.detail.value if (form.title == '') { wx.showModal({ title: '请填写分类名称', showCancel: false }) return } form.priority = Number.parseInt(form.priority) // 添加或者修改分类 // 修改模式 if (this.data.isEdit) { const category = this.data.category db.collection('Category') .doc(category._id) .update({ data: form }) .then(res => { console.log(res) showModal() }) } else { db.collection('Category') .add({ data: form }) .then(res => { console.log(res) showModal() }) } }, showModal() { // 操作成功提示并返回上一页 wx.showModal({ title: this.data.isEdit ? '修改成功' : '添加成功', showCancel: false, success: () => { wx.navigateBack() } }) }, delete: function() { // 确认删除对话框 wx.showModal({ title: '确认删除', success: res => { if (res.confirm) { const category = this.data.category db.collection('Category') .doc(category._id) .remove() .then(res => { console.log(res) wx.showToast({ title: '删除成功' }) wx.navigateBack() }) } } }) } }) [代码] 联表查询 在使用数据库时，难免要进行联表查询，云开发支持在云函数侧进行联表查询，你可以参考我的代码，来实现联表查询的功能。 [代码]const cloud = require('wx-server-sdk') cloud.init() const db = cloud.database() // 云函数入口函数 exports.main = async (event, context) => { const result = await db.collection('Food') .aggregate() .lookup({ from: 'Category', localField: 'category', foreignField: '_id', as: 'categories' }) .end() // .orderBy('priority', 'asc') // .get() console.log(result) return result.list } [代码] 文件上传 在小程序的操作中，难免会遇到需要进行图片上传的场景。在进行图片上传时，云开发提供了方便的云存储供我们查询数据。 在获取到文件的本地路径后，调用 [代码]wx.cloud.uploadFile[代码] 即可上传文件。 [代码]chooseImage() { wx.chooseImage({ count: 1, // 默认9 sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: res => { const tempFilePaths = res.tempFilePaths const file = tempFilePaths[0] const name = utils.random_filename(file) //上传的图片的别名，建议可以用日期命名 console.log(name) wx.cloud.uploadFile({ cloudPath: name, filePath: file, // 文件路径 }).then(res => { console.log(res) const fileId = res.fileID // 将文件id保存到数据库表中 db.collection('Seller').doc(this.data.seller._id) .update({ data: { logo_url: fileId } }).then(() => { wx.showToast({ title: '上传成功' }) // 渲染本地头像 this.setData({ new_logo: fileId }) }, err => { console.log(err) wx.showToast({ title: '上传失败' }) }) }) } }) } [代码] 微信支付逻辑的实现 作为一个商城，难免会有微信支付相关逻辑的实现。在这种情况下，可以借助云开发提供的微信支付云调用功能实现快速的 API 调用和接口的实现。 绑定商户 在使用云开发提供的微信支付时，需要先执行微信支付的绑定，在云开发控制台添加相应的商户号 [图片] 添加后微信会发来通知 [图片] 根据提示，开通账号即可。 [图片] 如果不绑定，将报“受理关系不存在”的错误 [图片] 函数代码调用 配置完成后，只需要在云函数中调用微信支付的接口，就可以实现相关调用的能力 [代码]const cloud = require('wx-server-sdk') cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 云函数入口函数 exports.main = async (event, context) => { console.log('请求中') console.log(cloud.getWXContext().ENV) let { orderId, amount, body } = event const wxContext = cloud.getWXContext() const res = await cloud.cloudPay.unifiedOrder({ body: body, outTradeNo: orderId, spbillCreateIp: '127.0.0.1', subMchId: '1447716902', totalFee: amount, envId: 'dinner-cloud', functionName: 'pay_cb' }) return res.payment } [代码] 这里 [代码]functionName: 'pay_cb'[代码]指的就是支付成功后，微信支付那侧给我的回调信息，后面我们就用它来更新我们的订单状态 小程序端代码调用 调用云函数后，会获得微信支付所需要的各种参数， [图片] 这个时候，就可以在小程序端调用微信支付接口，进行支付，相关代码可以参考 [代码]const { result: payData } = res wx.requestPayment({ timeStamp: payData.timeStamp, nonceStr: payData.nonceStr, package: payData.package, signType: 'MD5', paySign: payData.paySign, success: res => { console.log('支付成功', res) wx.showModal({ title: '支付成功', showCancel: false, success: () => { // 跳转订单详情页 wx.navigateTo({ url: '/order/detail/detail?objectId=' + order._id }) } }) }, ... [代码] 微信支付回调处理 微信统一下单里一个pay_cb回调函数，它是一个云函数，后续微信支付的支付信息将会发送在这个函数中，相应的，我们需要编写处理的方法 [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init({ // API 调用都保持和云函数当前所在环境一致 env: cloud.DYNAMIC_CURRENT_ENV }) const db = cloud.database() // 云函数入口函数 exports.main = async (event, context) => { console.log('支付回调') console.log(event) console.log(cloud.getWXContext().ENV) const orderId = event.outTradeNo const resultCode = event.resultCode if (resultCode === 'SUCCESS') { const res = await db .collection('Order') .doc(orderId) .update({ data: { status: 1 } }) console.log(res) return { errcode: 0 } } } [代码] 总结 云开发体验下来，优点自不必多说，微信登录与支付原生支持，调用与调试都很方便，特别是不用启本地服务开发，真的好用； 这个小程序的源码我已经开源了，你可以访问社区官网 获取源码，自行使用～ 作者：黄秀杰，16年开始从事小程序开发与技术布道，同名个人公众号「黄秀杰」。 云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为开发者提供高可用、自动弹性扩缩的后端云服务，包含计算、存储、托管等serverless化能力，可用于云端一体化开发多种端应用（小程序，公众号，Web 应用，Flutter 客户端等），帮助开发者统一构建和管理后端服务和云资源，避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。 产品文档：https://cloud.tencent.com/product/tcb 技术文档：https://cloudbase.net 技术交流加Q群：601134960 最新资讯关注微信公众号【腾讯云云开发】

这是一个神奇的网站，哦不，神奇的云函数，它只有三行代码：（真的只有三行哦） 云函数：login index.js： const cloud = require('wx-server-sdk') cloud.init() exports.main = async (event) => { return { ...event, ...cloud.getWXContext() } } 神奇功能之三：100%成功获取unionid： 保证100%成功获取unionid，需要用户信息授权。 强调一下：这个100%是指必须绑定了开放平台，那么不管用户是什么情况，不管有没有关注公众号，一定100%能获取到unionid。 依然需要符合unionid机制：第1条。 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/union-id.html js: getUserInfo: function (e) { app.globalData.userInfo = e.detail.userInfo if (!app.globalData.unionid ) { wx.cloud.callFunction({ name: 'login', data: { weRunData: wx.cloud.CloudID(e.detail.cloudID) } }).then(res => { app.globalData.unionid = res.result.weRunData.data.unionId }) } }, 其他功能： 神奇功能之四：获取电话号码： 还是这三行代码，获取用户的电话号码。 https://developers.weixin.qq.com/community/develop/article/doc/0006a8ec7ac860c94bf90a34f5d813 神奇功能之五：获取群id： 将小程序分享到某群里，可获得该群的群id， https://developers.weixin.qq.com/community/develop/article/doc/000ea802c00f70894cf9fe72556013 神奇功能之一：获取openid： https://developers.weixin.qq.com/community/develop/article/doc/00080c6e3746d8a940f9b43e55fc13 神奇功能之二：不用授权获取unionid： https://developers.weixin.qq.com/community/develop/article/doc/000a0c6b580338e947f9db0c65b813 [图片]

前几天有偿征集了两个方案，现在把代码公布下，这个问题非常考验思维逻辑能力 问题描述 目前有一个数组，长度为1000，如何把这么大的数据量，渲染到swiper中，保证swiper左右滑动时，丝滑般流畅 使用场景 一般会用于在线答题小程序答题过程中，有时候题库大，顺序答题会存在这个问题，所以说需求来自真实项目场景。 1、 https://developers.weixin.qq.com/s/3dsCzam176gk 2、 https://developers.weixin.qq.com/s/DUzMc6mw73g6 第二个问题：解决wx.previewImage不能对应显示(总显示第一张) wx.preview索引问题 https://developers.weixin.qq.com/community/develop/article/doc/000004d972c3a8b33369dda8d51813 https://developers.weixin.qq.com/s/kSKrV5mZ7Egq 非常感谢参与的同学 1 第三个问题：使用tcb-router管理路由 https://developers.weixin.qq.com/community/develop/article/doc/00000a8eaec7e86b9f48cfeb051c13 2 第四个问题：weui内置扩展库使用步骤 https://developers.weixin.qq.com/s/1GPX7jmG78dz https://developers.weixin.qq.com/community/develop/article/doc/000224381788e8e5bb89426f55e413 3 第五个问题：算法生成云开发集合_id https://developers.weixin.qq.com/community/minihome/doc/000a0e0be54568e8ac0aab28256800 第六个问题 关于 swiper 中 数据过多时 滑动卡顿掉帧的解决办法? - 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/000e665d0bcc78861d8a7dcef5b413 4

适应场景： 小程序页面跳转redirect/navigate/其它方式 分析： 从用户触发跳转行为到下一个页面onload生命周期函数内时间差会有500ms左右，如果在页面跳转之后进行onload函数内才开始去加载页面数据，那么这500ms左右的时间就浪费了。 改进： 在页面触发跳转行为的处理函数里结合promise预先加载下个页面的数据，并将promise对象缓存，此时页面跳转和加载数据同时进行，到了目标页面再取出缓存的promise对象进行判断和取数据操作。 效果： 跳转页面加载速度提高了600ms。 示例： 代码结构 [图片] pageManager.js [代码]// 写在utils里的公用方法 const pageList = {}; module.exports = { putData:function(pageName, data){ pageList[pageName] = data; }, getData:function(pageName){ return pageList[pageName]; } } [代码] util.js [代码]const myPromise = fn => obj => { return new Promise((resolve, reject) => { obj.complete = obj.success = (res) => { resolve(res); } obj.fail = (err) => { reject(err); } fn(obj); }) } module.exports = { myPromise : myPromise } [代码] index.js [代码]// 跳转页面 const {myPromise} = require('../../utils/util'); const pageManager = require('../../utils/pageManager'); page({ data: { }, onLoad:function(){ }, gotoPageA:function(){ const PromisePageA = myPromise(wx.request)({ url : '' }).then((res)=>{ return res.data; }) pageManager.putData('pageA',promisePageA); wx.navigateTo({ url: 'pages/pageA/pageA' }) } }) [代码] pageA.js [代码]// 被跳转页面 const util = require('../../utils/util.js'); const pageManager = require('../../utils/pageManager'); const {myPromise} = require('../../utils/util'); Page({ data:{ logs:[] }, onLoad: function(){ const promisePageA = pageManager.getData('pageA'); if(promisePageA){ const resData = promisePageA.then( function(data){ }, function(){ console.log("err"); } ) } } }) [代码]

微信小程序仿朋友圈功能开发（发布、点赞、评论等功能） 1.项目分析 项目整体分为三个部分 发布 展示 详情页 [图片] 2.数据库设计分析 **所有表共有字段 com ** create_time 记录的创建时间 update_time 记录最近的一次修改时间 动态表设计 circles_list 既然是仿朋友圈功能实现，那么数据实体必然包括 文字（主题内容） 和 图片。 content images 发布的信息还要携带上发布者的身份识别码、昵称 和 头像 , 可以选择性的带上位置信息（不需要要进行功能拓展的话就不用加上该字段）。 userid nickname avatar location 功能中存在 点赞 ， 评论等功能，需要的字段有 点赞数，评论数。 thumbsnum remarksnum 对于每一条记录，都要设置一个主键，唯一识别码 _id _id 点赞表设计 thumbs_list 设计该表的主要功能是 判断 该用户 是否对某个动态点过赞 circle_id 点赞的文章id userid cancle true / false 用于配置多次点击取消点赞 _id 评论表设置 remarks_list circle_id 评论的文章id userid content 评论的内容 avatar 评论者头像 nickname 评论者昵称 _id 3.项目效果 使用的框架 ColorUI 按照顺序展示 1.发布界面 [图片] 2.展示界面 [图片] 3.详情展示页 [图片] 4.项目关键问题 获取用户信息授权 我是在点击发布的图片按钮处做的处理 [代码] <button open-type="getUserInfo" bindgetuserinfo="topub"> <image class="add_icon" src="../../images/add.png"></image> </button> [代码] [代码] topub(e){ if (e.detail.errMsg == "getUserInfo:ok") { console.log('获得授权成功') app.globalData.userInfo = e.detail.userInfo; wx.setStorageSync('wxuserinfo', e.detail.userInfo) //console.log(e.detail.userInfo) wx.navigateTo({ url: 'SocialCirclePub/SocialCirclePub', }) } else { console.log('获得授权失败') } } [代码] 点赞评论数目增加处理 通过云函数解决 inc 解决 [代码] // 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) const db = cloud.database() const _ = db.command exports.main = async (event, context) => { var opr = event.opr; if(opr == 'incthumb'){ try{ return db.collection('circles_list').doc(event.id).update({ data:{ thumbsnum:_.inc(1) } }) }catch(e){ console.error(e) } }else if (opr == 'incremark') { try { return db.collection('circles_list').doc(event.id).update({ data: { remarksnum: _.inc(1) } }) } catch (e) { console.error(e) } } } [代码] 5.源码 关注公众号程序Stack ， 发送 “朋友圈” 获取项目地址和全部源码，后续会更新更多的技术知识。 [图片] <font size=5px; face=“楷体”>小程序开发联系QQ：1025584691</font>

社区小程序「玉帛书」服务端API 开源地址 基于eggjs开发(eggjs+mysql+redis) [代码]$ cd api $ npm install $ npm run dev [代码] 具体步骤 手动创建mysql数据库：community 在api目录下运行命令: [代码]npx sequelize db:migrate [代码] 打开config目录下的config.default.js进行相关配置 [代码] /** * 微信小程序配置 */ config.miniprogram = { appid: '', secret: '', }; /** * qq小程序配置 */ config.qqminiprogram = { appid: '', secret: '' }; /** * 公众号配置 */ config.yitao = { appid: '', secret: '', }; /**七牛存储配置 */ config.qiniu = { AccessKey: '', SecretKey: '', bucket: '', }; [代码]

先上效果图(无图无真相) [图片] 1. 第一步准备表情包素材 我这里用的微博的表情包可以点击下面的链接查看具体JSON格式这里不展示 表情包文件weibo-emotions.js 2. 第二步编写表情组件(基于wepy2.0) 如果不会 wepy 可以先去了解下如果你会vue那非常容易上手 首先我们需要把表情包文件weibo-emotions.js中的JSON文件转换成我们需要的格式 [代码]emojis = [ { id: 编号, value: 表情对应的汉字含义 例如:[偷笑], icon: 表情相对图片路径, url: 表情具体图片路径 } ] [代码] 具体转换方法 [代码]function () { const _emojis = {} for (const key in emotions) { if (emotions.hasOwnProperty(key)) { const ele = emotions[key]; for (const item of ele) { _emojis[item.value] = { id: item.id, value: item.value, icon: item.icon.replace('/', '_'), url: weibo_icon_url + item.icon } } } } return _emojis } [代码] 编写组件的html代码 [代码]<template> <div class="emoji" style="height:{{height}}px;" :hidden="hide"> <scroll-view :scroll-y="true" style="height:{{height}}px;"> <div class="icons"> <div class="img" v-for="img in emojis" :key="img.id" @tap.stop="onTap(img.value)"> <img class="icon-image" :src="img.url" :lazy-load="true" /> </div> </div> <div style="height:148rpx;"></div> </scroll-view> <div class="btn-box"> <div class="btn-del" @tap.stop="onDel"> <div class="icon icon-input-del" /> </div> </div> </div> </template> [代码] html代码中的height变量为键盘的高度，通过props传入 编写组件的css代码 [代码].emoji { position: fixed; bottom: 0px; left: 0px; width: 100%; transition: all 0.3s; z-index: 10005; &::after { content: ' '; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 0.4px solid rgba(235, 237, 245, 0.8); color: rgba(235, 237, 245, 0.8); } .icons { display: flex; flex-wrap: wrap; .img { flex-grow: 1; padding: 20rpx; text-align: left; justify-items: flex-start; .icon-image { width: 48rpx; height: 48rpx; } } } scroll-view { background: #f8f8f8; } .btn-box { right: 0rpx; bottom: 0rpx; position: fixed; background: #f8f8f8; padding: 30rpx; .btn-del { background: #ffffff; padding: 20rpx 30rpx; border-radius: 10rpx; .icon { font-size: 48rpx; } } } .icon-loading { height: 100%; display: flex; justify-content: center; align-items: center; } } [代码] 这里是使用less来编写css样式的,flex布局如果你对flex不是很了解可以看看 这篇文章 组件JS代码比较少 [代码]import { weibo_emojis } from '../common/api'; import wepy from '@wepy/core'; wepy.component({ options: { addGlobalClass: true }, props: { height: Number, hide: Boolean }, data: { emojis: weibo_emojis, }, methods: { onTap(val) { this.$emit('emoji', val); }, onDel() { this.$emit('del'); } } }); [代码] 表情组件基本已经编写完成是不是很简单 那么编写好的组件怎么用呢？ 其实也很简单 第一步把组件引入到页面 [代码]<config> { "usingComponents": { "emoji-input": "../components/input-emoji", } } </config> [代码] 第二步把组件加入到页面html代码中 [代码]<emoji-input :height="boardheight" @emoji="onInputEmoji" @del="onDelEmoji" :hide="bottom === 0" /> [代码] 第三步编写onInputEmoji，onDelEmoji方法 [代码] /** * 选择表情 */ onInputEmoji(val) { let str = this.content.split(''); str.splice(this.cursor, 0, val); this.content = str.join(''); if (this.cursor === -1) { this.cursor += val.length + 1; } else { this.cursor += val.length; } this.canSend(); }, /** * 删除表情 */ onDelEmoji() { let str = this.content.split(''); const leftStr = this.content.substring(0, this.cursor); const leftLen = leftStr.length; const rightStr = this.content.substring(this.cursor); const left_left_Index = leftStr.lastIndexOf('['); const left_right_Index = leftStr.lastIndexOf(']'); const right_right_Index = rightStr.indexOf(']'); const right_left_Index = rightStr.indexOf('['); if ( left_right_Index === leftLen - 1 && leftLen - left_left_Index <= 8 && left_left_Index > -1 ) { // "111[不简单]|23[33]"left_left_Index=3,left_right_Index=7,leftLen=8 const len = left_right_Index - left_left_Index + 1; str.splice(this.cursor - len, len); this.cursor -= len; } else if ( left_left_Index > -1 && right_right_Index > -1 && left_right_Index < left_left_Index && right_right_Index <= 6 ) { // left_left_Index:4,left_right_Index:3,right_right_Index:1,right_left_Index:2 // "111[666][不简|单]"right_right_Index=1,left_left_Index=3,leftLen=6 let len = right_right_Index + 1 + (leftLen - left_left_Index); if (len <= 10) { str.splice(this.cursor - (leftLen - left_left_Index), len); this.cursor -= leftLen - left_left_Index; } else { str.splice(this.cursor, 1); this.cursor -= 1; } } else { str.splice(this.cursor, 1); this.cursor -= 1; } this.content = str.join(''); }, [代码] 好了基本就完成了一个表情组件的编写和调用 如果你想看完整的代码请点击这里 如果你想体验可以扫下面的二维码自己去体验下 [图片] 下篇 我们写写怎么实现一个简单的富文本编辑器

1. 写在前面 1.1 微信开发者工具现状 具备一些基本的通用IDE功能，但是第三方的支持扩展需要加强。 1.2 开发者工具自带的编辑器扩展功能 可能很多老铁没用过官方的微信开发者工具的编辑器扩展（我一般称为编辑器插件）。官方把这块功能也隐藏得很深，也没有相关文档介绍，但是预留了相关的入口。合理利用第三方编辑器插件，可以极大的提升开发效率。下面先来看看官方预留的编辑器插件入口： [图片] （图一） 2. 几个不错插件安装效果 2.1 标签高亮插件-vincaslt.highlight-matching-tag [图片] 功能：可以把当前行对应的标签开头和结尾高亮起来，让开发者一目了然 2.2 小程序开发助手插件-overtrue.miniapp-helper [图片] 功能：必须要说的这个是纯国产的插件，里面的代码片段功能很全，具体介绍：小程序开发助手 - Visual Studio Marketplace https://marketplace.visualstudio.com/items?itemName=overtrue.miniapp-helper 2.3 minapp插件-qiu8310.minapp-vscode [图片] 功能：这个是今天的明星插件，里面的跳转功能很强，可以在wxml里CMD+点击对应变量/方法和CSS样式名称直接跳转到对应的js/wxss文件对应的地方。具体的下面是官方介绍： 标签名与属性自动补全 根据组件已有的属性，自动筛选出对应支持的属性集合 属性值自动补全 点击模板文件中的函数或属性跳转到 js/ts 定义的地方（纯 wxml 或 pug 文件才支持，vue 文件不完全支持） 样式名自动补全（纯 wxml 或 pug 文件才支持，vue 文件不完全支持） 在 vue 模板文件中也能自动补全，同时支持 pug 语言 支持 link（纯 wxml 或 pug 文件才支持，vue 文件不支持） 自定义组件自动补全（纯 wxml 文件才支持，vue 或 pug 文件不支持） 模板文件中 js 变量高亮（纯 wxml 或 pug 文件才支持，vue 文件不支持） 内置 snippets 支持 emmet 写法 wxml 格式化 3. DIY添加适合自己的插件 3.1 添加插件功能简介 仔细研究过微信开发者工具的人可能知道或者了解，其实微信开发者工具编辑器跟微软的开源编辑器vsCode「颇有渊源」。再深入研究发现，vsCode的插件完全可以无缝移植到微信开发者工具编辑器里来，所以今天的内容就是移植vsCode的插件到微信开发者工具。咱们先看看微信开发者工具自带的「管理编辑器扩展」功能（图1标注为2的地方） [图片]（图二） 3.2 插件添加具体步骤 3.2.1 安装插件，获取插件文件 安装vsCode并安装你需要移植的插件，必须要说的是vsCode的插件非常多，好的插件也很多。相关安装，搜索插件教程建议大家百度相关教程。或者直接下载vsCode亲自体验，插件安装过程还是非常简单的。 3.2.2 复制插件文件夹 找到vsCode相关插件的安装文件夹： 操作系统 安装路径 windows %USERPROFILE%.vscode\extensions macOS ~/.vscode/extensions Linux ~/.vscode/extensions 复制对应插件文件夹到微信开发者工具的「打开编辑器扩展目录」（图一标注为1的地方） 3.2.3 添加插件配置文件 新版开发者工具直接进入图形设置，扩展设置里勾选对应插件即可。如下图： [图片] 旧版操作方法：进入微信开发者工具的「管理编辑器扩展」功能页面，在尾端加入对应添加的插件名称。以以上3个介绍的插件为例，在原来的尾端加入： “vincaslt.highlight-matching-tag”, “overtrue.miniapp-helper”, “qiu8310.minapp-vscode” 3.2.4 见证奇迹 重启微信开发者工具，见证插件带来的编码便利吧！ 4 需要注意的 vsCode的插件很多，小程序相关的也越来越多了，但是插件质量参差不齐，所以安装时建议选择「标星」star比较多的插件。

操作：ctrl c + ctrl v 资源：所需的JS和图片资源在云盘 （提取码：o4mk）里，直接粘贴在demo2文件夹就可以了 思路：选择自己附近的地址或搜索想要的地址 欢迎热烈交流啊哈哈哈23333，经常在线的 ps. 记得申请个腾讯地图qqmap key啊 os. 代码有点小多，ctrl c + ctrl v要勤快点 [图片] demo [代码]<view bindtap="jump"> <view wx:if='{{!address}}'>请选择地址(必选)</view> <view wx:else>{{address}}</view> </view> ------------------------------------------------------ jump(){ wx.navigateTo({ url: '/pages/demo2/demo2', }) } [代码] demo2 [代码]<view class="searchCtr"> <view class="searchIcon"> <icon type='search' /> </view> <input bindinput="getAdr" placeholder='请输入地址' placeholder-class="searchPH" class="search" /> </view> <map class="map" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" hidden='{{keyword}}' /> <view class="adrTxtBox" style="margin-top:{{keyword?100:650}}rpx"> <view wx:for="{{adrList}}" wx:key="index"> <view bindtap="adrConfirm" data-index="{{index}}" class="adrBox"> <view class="imgNtitle"> <image src="minilandmark.png" class="minilandmark" /> <view class="title">{{item.title}}</view> </view> <view class="adrDetail">{{item.address}}</view> </view> </view> </view> ------------------------------------------------------------------------------------------ var QQMapWX = require('/qqmap-wx-jssdk.js') var qqmapsdk; Page({ onLoad() { var that = this qqmapsdk = new QQMapWX({ key: '你自己的qqMap key' }) wx.getLocation({ type: 'gcj02', success(res) { const lat = res.latitude const lon = res.longitude const markers = [{ latitude: lat, longitude: lon, iconPath: 'landmark.png', width: 40, height: 40, label: { content: '你现在位置', bgColor: '#ffffff', display: 'always', borderRadius: 3, borderWidth: 1, anchorY:-30, anchorX:15 } }] qqmapsdk.reverseGeocoder({ location: { latitude: lat, longitude: lon }, get_poi: 1, success(res) { var poiList = res.result.pois var adrList = [] for (var i in poiList) { adrList.push({ title: poiList[i].title, address: poiList[i].address, latitude: poiList[i].location.lat, longitude: poiList[i].location.lng }) } that.setData({ latitude: lat, longitude: lon, markers: markers, adrList: adrList }) } }) } }) }, getAdr(e) { var that = this; var keyword = e.detail.value this.setData({ keyword: keyword }) qqmapsdk.getSuggestion({ keyword: e.detail.value, success: function (res) { var poiList = res.data var adrList = []; for (var i = 0; i < res.data.length; i++) { adrList.push({ title: poiList[i].title, address: poiList[i].address, latitude: poiList[i].location.lat, longitude: poiList[i].location.lng }); } that.setData({ adrList: adrList }); } }); }, adrConfirm(e) { let pages = getCurrentPages() let prePage = pages[pages.length - 2] let index = e.currentTarget.dataset.index let adrList = this.data.adrList let address = adrList[index].title let latitude = adrList[index].latitude let longitude = adrList[index].longitude prePage.setData({ address: address, latitude: latitude, longitude: longitude }) wx.navigateBack({ delta: 1 }) } }) ------------------------------------------------------------------------------------------------ .searchCtr { position: fixed; display: flex; justify-content: center; align-items: center; top: 0; height: 100rpx; width: 100%; background-color: #fec22c; z-index: 1; } .searchIcon { display: flex; align-items: center; justify-content: center; background-color: white; width: 10%; height: 70rpx; border-radius: 60rpx 0 0 60rpx; } .search { background-color: white; width: 80%; height: 70rpx; border-radius: 0 60rpx 60rpx 0; } .searchPH { font-size: 27rpx; } .map { position: fixed; top: 100rpx; height: 550rpx; width: 100%; z-index: 1; } .adrTxtBox { width: 100%; } .adrBox { display: flex; flex-direction: column; justify-content: center; margin-left: 2.5%; height: 150rpx; width: 95%; border-bottom: 2rpx solid rgba(133, 133, 133, 0.2); } .imgNtitle { display: flex; flex-direction: row; align-items: center; height: 50rpx; } .minilandmark { width: 40rpx; height: 40rpx; } .title { margin-left: 20rpx; } .adrDetail { margin-top: 20rpx; margin-left: 60rpx; font-size: 24rpx; color: #666; } [代码]

常在河边走，哪有不湿鞋，上线了几十个小程序，遇到审核被拒的情况数不胜数，所谓是久病成医说的就是我，😄 从今天开始立贴，具体举例审核被拒的几种情况，以及怎么破解 1、 为避免您的小程序被滥用，请你完善内容审核机制，如调用小程序内容安全API，或使用其他技术、人工审核手段，过滤色情、违法等有害信息，保障发布内容的安全。 解决方式： 增加安全接口校验，具体可以参考下面文档 https://developers.weixin.qq.com/community/develop/doc/00004843288058ed4039d223951401 https://developers.weixin.qq.com/community/develop/doc/000cc03084c67888c97992e4756809 2、 小程序内容不符合规则: 你好，你的小程序涉及金融相关，属个人主体小程序未开放类目，建议申请企业主体小程序。请根据上述原因对小程序进行修改，并重新提交代码审核。 [图片] 解决方式： 由于个人主体小程序不能涉及金融，如果确认没有涉及，通过反馈渠道进行沟通。 3、 1:小程序内容不符合规则: (1):你好，你的小程序实际展示为测试商品/内容，请上架正式运营商品/内容后再提交代码审核。 请根据上述原因对小程序进行修改，并重新提交代码审核。 [图片] 解决方案 一般这种情况是由于小程序不完善或者小程序内容不完善，如果小程序内容比较完备，就需要把小程序内容做的正式一些。 4、 1:小程序内容不符合规则: (1):你好，你的小程序提供内容为在线游戏，请注册一个新账号，同时选择游戏类目。 请根据上述原因对小程序进行修改，并重新提交代码审核。 若对上述原因无法理解，可前往反馈页面进行反馈。 [图片] 解决方案 由于是小程序不能提交交互性强的游戏产品，需重新注册小游戏，重新开发。 5、 [图片] 解决方案 个人主体小程序不能涉及视频服务，所以这个无解，如果想继续发布只能走企业主体 6、 1:小程序内容不符合规则: (1):小程序页面内容涉及信息发布平台功能，属于个人主体类型未开放类目，建议申请企业主体类型小程序。 请根据上述原因对小程序进行修改，并重新提交代码审核。 若对上述原因无法理解，可前往反馈页面进行反馈。 [图片] 解决方案： 由于个人主体小程序不能涉及UGC，所以涉及这个功能基本是要被阉割掉的。无解 具体可参考下面文档 https://mp.weixin.qq.com/s/UgMTOwPGr-8GxzrdL-guHQ 8、 1:小程序内容不符合规则: (1):小程序页面内容涉及信息发布平台功能，属于个人主体类型未开放类目，建议申请企业主体类型小程序。 2:小程序功能不符合规则: (1):你好，小程序帐号登录功能暂未符合登录规范要求，包含但不限于存在：尚未体验完整服务功能即要求用户授权个人信息登录，帐号登录环节未能给用户清晰提供可取消/拒绝的选择权利等，请整改后再重新提交审核。参考文档 请根据上述原因对小程序进行修改，并重新提交代码审核。 若对上述原因无法理解，可前往反馈页面进行反馈。 [图片] 解决方案 由于小程序用户授权审核规范在9月1号改变，具体请参考相关文档，主旨就是在用户体验完小程序之前不要授权 具体文档请参考 https://mp.weixin.qq.com/s/X3XSEKRYmSFv7kM5sxr09A 9. 小程序广告审核驳回原因，这个一般是由于广告被遮挡造成的，可以通过样式布局修改来完成。 [图片] 10. 您的小程序实际展示位测试商品/内容，请商家正式运营商品后再提交代码审核 [图片] 11. 1: 你好，你的小程序涉及提供用户自行生成内容（文字、图片、音/视频）的记录、分享，需补充：社交-笔记类目。或自查代码，确保包括前端展示、小程序代码等整体均移除上述内容，再提交代码审核。 12 [图片]

功能介绍开源地址https://github.com/liubin1592/community【动弹】用户可以发送文字+图片+表情。【分享文章】用户可以分享文章目前支持公众号文章,掘金,简书【写文章】用户可以通过富编辑器进行写作【写问答】用户可以提问,回答用户提问【纸飞机】用户可以发送纸飞机其他用户可以回复别人的纸飞机，别人不能看到其他人的回复内容【话题】一个话题下面包含动弹,文章,问答,查看自己关注的话题，最近浏览的话题【消息】收取用户点赞评论回答等用户交换通知和系统通知,用户可以订阅消息【个人主页】展示个人信息,动弹,文章,问题,关注的话题,编辑个人信息【关注】用户可以关注其他用户,关注喜欢的话题【评论】用户可以评论动弹,文章,回答【点赞】用户可以点赞帖子,评论,回复【分享】用户可以分享帖子到微信,生成海报分享到朋友圈小程序截图 [图片] [图片]