官方公告地址： 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)去获取是否授权过，用不到可以不加这个判断。

[图片] 分析： 选中时显示背景和文字，图标变换为选中状态的图标 默认状态下，进入小程序显示的是中间的 “地图” 选中 “预约”时，隐藏tabbar ，且导航栏显示 返回 按钮，点击返回 “地图” 整体效果 [图片][图片][图片] 整体目录 [图片] 设置 app.json 在 [代码]app.json[代码]中 配置tabbar 中的 “custom”: true [代码]{ "pages": [ "custom-pages/custom-active/index", "custom-pages/custom-order/index", "custom-pages/custom-my/index" ], "entryPagePath": "custom-pages/custom-active/index", "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "自定义tabbar", "navigationBarTextStyle": "black" }, "tabBar": { "custom": true, "list": [ { "pagePath": "custom-pages/custom-my/index", "text": "我的", "iconPath": "/images/tabbar/my.png" }, { "pagePath": "custom-pages/custom-active/index", "text": "活动" }, { "pagePath": "custom-pages/custom-order/index", "text": "预约" } ] }, "usingComponents": {}, } [代码] 在项目根目录下，添加 custom-tab-bar custom-tab-bar为component 编写 tabBar 代码 用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增 getTabBar 接口，可获取当前页面下的自定义 tabBar 组件实例 在根目录下新建文件夹名为 custom-pages ，存放自定义tabbar的页面 custom-pages -> custom-active -> custom-my -> custom-order [图片] custom-tab-bar代码 [代码]Component({ data: { // tabbar 的列表 tabbarLists:[ { pagePath: "/custom-pages/custom-my/index", text: "我的", iconPath: "/images/tabbar/my.png", selectedIconPath: "/images/tabbar/my_active.png" }, { pagePath: "/custom-pages/custom-active/index", text: "地图", iconPath: "/images/tabbar/map.png", selectedIconPath: "/images/tabbar/map_active.png" }, { pagePath: "/custom-pages/custom-order/index", text: "预约", iconPath: "/images/tabbar/order.png", selectedIconPath: "/images/tabbar/order_active.png" } ], active:null, //设为数字，会产生tabbar闪烁 isShow:true //控制显示隐藏tabbar }, methods: { switchTab(e){ const { index,url } = e.currentTarget.dataset; wx.switchTab({url}) } } }) [代码] [代码]<view class="tab-bar" wx:if="{{isShow}}"> <block wx:for="{{tabbarLists}}" wx:key="item"> <view class="tab-bar-item" data-index="{{index}}" data-url="{{item.pagePath}}" bindtap="switchTab" > <image class="icon" src="{{active == index?item.selectedIconPath:item.iconPath}}"></image> <view class="text {{active == index?'active':''}}">{{item.text}}</view> <!-- 设置选中状态下的背景 --> <view wx:if="{{active == index}}" class="bg-item"></view> </view> </block> </view> [代码] [代码].tab-bar{ height: 48px; background-color: #ffffff; display: flex; border-top: 1rpx solid #f9f9f9; box-shadow: 0 0 5rpx #f8f8f8; } .tab-bar-item{ display: flex; flex: 1; justify-content: center; align-items: center; position: relative; } .icon{ width: 27px; height: 27px; } .text{ font-size: 26rpx; padding: 0 5rpx; letter-spacing: 0.1rem; display: none; } .active{ color: #10B981; display: block; font-weight: 800; } .bg-item{ position: absolute; width: 80%; top: 15rpx; bottom: 15rpx; border-radius: 40rpx; background-color:rgba(52, 211, 153,0.15); } [代码] tabbar的page页 一共3个tabbar的page页：custom-active、custom-my、custom-order custom-active 页 核心代码 [代码]Page({ onShow() { if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ active: 1 }) } } }) [代码] custom-my 核心代码 [代码]Page({ onShow() { if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ active: 0 }) } } }) [代码] custom-order 该page页要隐藏 tabbar ，所以要将 isShow设置为false; 使用 custom-navigator 自定义组件 显示 头部导航 [代码]<!-- 使用自定义组件导航头 --> <custom-navigator title="{{title}}"> </custom-navigator> [代码] [代码]Page({ data: { title:"预约" }, onShow() { if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ active: 2, isShow:false }) } } }) [代码] [代码]{ "usingComponents": { "custom-navigator":"/components/custom-navigator/custom-navigator" }, "navigationStyle": "custom" } [代码] custom-navigator 自定义组件 [代码]<view class="status"></view> <view class="navigator"> <view class="icon"> <image bindtap="gobackTap class="icon-image" src="/images/back.png"></image> </view> <view class="text">{{title}}</view> <view class="right"></view> </view> [代码] [代码].status{ height: 20px; } .navigator{ height: 44px; background-color: #ffffff; display: flex; flex-direction: row; align-items: center; justify-content: center; } .icon{ width: 40px; height: inherit; display: flex; align-items: center; justify-content: center; } .icon-image{ width: 27rpx; height: 27rpx; border: 1rpx solid #cccccc; padding: 8rpx; border-radius: 20rpx; } .text{ color: #333333; flex: 1; text-align: center; font-size: 28rpx; } .right{ color: #333333; width: 40px; } [代码] [代码]Component({ properties: { title:{ type:String, value:"标题" } }, methods: { gobackTap(e){ wx.switchTab({ url: '/custom-pages/custom-active/index', }) } } }) [代码]

17年 因为业务上有该类需求，所以提过一个问题。 想实现监听左上角按钮来做其他操作，比如跳转其他页面。 https://developers.weixin.qq.com/community/develop/doc/92f7cdbacdf724cba640955423a8444f 此交互优化只应对表单等内容提交回填的处理 应用场景： 某个表单提交页，页面挺多内容，用户填写完后，不小心触发了左上角返回，或者不小心点了物理按键，那么用户填写的内容就丢失了，那么最开始大家的想法都是，点击左上角返回按钮或者物理按键返回能触发监听我们再弹窗提醒用户是否退出当前页面。这个交互应该是再正常不过的了，在各种app都有见过这种交互。 网页里： h5里都是通过监听popstate，以及设置pushstate实现。 小程序里： 然而小程序的翻遍官方文档，没找到该方法，发帖询问后也是得到官方童鞋回复，不会提供该方法。 官方童鞋给的原因是：会有某些开发者，阻止用户退出某些页面，以达到一些xxx目的，所以官方为了防止开发者滥用，并不打算开放该功能。 翻了社区大家实现方式，有大佬给了一个方案： https://developers.weixin.qq.com/community/develop/article/doc/000844b537c230b04b999a54f56013 该监听方法的缺点： [图片] 最后确实没发现有什么好的监听方案了，那既然代码无法实现，那么我们可以优化用户体验来达到该效果。 实现操作方案如下： [代码]// app.js下跟onLaunch同级新增个globalData字段。 globalData: { formData: {} // 这里需要默认填写该字段，不然其他地方使用了会报错。 } // 首先用户填写任意字段都存储一个对象到globalData下。 <input type="text" placeholder="请输入用户昵称" bindinput="handleUserName" /> handleUserName(e) { getApp().globalData.formData.userName = e.detail.value } [代码] 这样将用户填写的内容都存到globalData下，而我们最初的交互是，存储后用户点击返回下次进来自动回填。 [代码]onShow() { this.setData({ userName: getApp().globalData.formData.userName || '' }) } [代码] 而最终的交互是这样操作： 如果用户填写完一整页内容，而内容我们都存到了globalData下，用户不小心返回了上一页，那么我们在用户重新进入该页面时，判断globalData的formData下是否存在内容，如果存在，弹窗提醒用户是否回填上次填写的内容，如果用户确认回填那么我们给用户自动回填上次填写的信息，如果用户取消回填，那么我们将globalData下的formData设置为空对象即可。 如此 我们即从交互上规避了不小心点击返回导致需要重新输入的问题，并且交互体验得到极大提升。。

前言 今天在学习列表渲染的时候，尝试实现了支持横向滑动的列表，但是遇到了很多问题，做一个小小的总结。 组件scroll-view scroll-view是一种视图容器，指定可滚动视图区域。通过设置属性scroll-y=true并给给scroll-view一个固定高度height，可以实现竖向滚动；通过设置属性scroll-x=true可以实现横向滚动，其他的属性可以参考官方文档。 列表渲染 列表渲染是一种很基础的渲染方法，在组件上使用 wx:for 绑定一个数组，即可使用数组中各项的数据重复渲染该组件。在组件中，使用 wx:for-item 可以指定数组当前元素的变量名，默认为item；使用 wx:for-index 可以指定数组当前下标的变量名，默认为index；使用 wx:key 来指定列表中项目的唯一的标识符，可以提高渲染效率（没有特殊需求的话可以直接用index指定）。 例如，在.js中声明一个含有六个元素的数组list，可以用以下代码循环地渲染list中的所有元素 [代码]<!-- index.wxml 列表渲染 --> <view wx:for="{{list}}" wx:key="{{index}}" class="view-parent"> <view class="view-item">{{item.txt}}</view> </view> [代码] 显示效果如下： [图片] 横向滑动列表 将组件scroll-view和列表渲染结合，就可以实现横向滑动列表了，样例代码如下： [代码]<!-- index.wxml 横向滑动列表 --> <text style="margin-left: 40%;">横向滑动列表</text> <scroll-view scroll-x="true" class="scroll-x-list"> <view wx:for="{{list}}" wx:key="{{index}}" class="view-parent"> <view class="view-item">{{item.txt}}</view> </view> </scroll-view> /* index.wxss */ .scroll-x-list{ height:150px; } .view-item{ width:100px; height:100px; background:#1bf891; margin:10px; } [代码] 显示效果如下： [图片] 可以看到结果和预期差很多，不仅没有实现横向滑动，还没有显示出所有的元素。原因是代码虽然在组件中设置了需要的属性，但是在样式上没有做对应的调整，我们必须在wxss中设置布局才可以达到预期效果。最容易想到的就是我们常用的flex布局，关于flex布局的内容比较多，这里就不展开了，推荐看官方文档学习。在进行下一步修改前，先声明几个必须要知道的小细节： 组件scroll-view是不支持flex布局的，要想在scroll-view中使用flex布局，必须嵌套一个其他的支持flex布局的容器，如view。 scroll-view 中的需要滑动的元素不可以用 float 浮动。 scroll-view 中在需要装载滑动元素的父容器中开启flex布局是没有作用的，应该使用dislay:inline-block来进行元素的横向编排。 第一种方法，由于要实现的是横向滑动列表，那么容器中的元素一定是不允许换行的，刚刚提到，scroll-view是不支持flex布局的，所以开启flex布局并设置flex-wrap=nowrap是无效的行为。我们选择在类scroll-x-list中设置white-space: nowrap来处理元素中的空白，让容器内的换行无效。同时，还应设置装载滑动元素的父容器——view-parent的dislay为inline-block，代码如下： [代码]/* index.wxss */ .scroll-x-list{ height:150px; white-space: nowrap; } .view-parent{ display:inline-block; } [代码] 显示效果如下，已经可以横向滚动列表了。 [图片] 第二种方法，可以在scroll-view中嵌套一个view，在这个view中开启flex布局并设置flex-wrap=nowrap来阻止换行，代码如下： [代码]<!-- index.wxml 另一种横向滑动列表 --> <text style="margin-left: 40%;">横向滑动列表</text> <scroll-view scroll-x="true" class="scroll-x-list"> <view class='flex-view'> <view wx:for="{{list}}" wx:key="{{index}}" class="view-parent"> <view class="view-item">{{item.txt}}</view> </view> </view> </scroll-view> /* index.wxss */ .scroll-x-list{ height:150px; } .flex-view{ display:flex; flex-wrap: nowrap; } .view-parent{ display:inline-block; } [代码] 显示效果与刚刚相同： [图片] 一些改进 在第一种方法中，我们没有使用到flex布局，就很容易遇到一些对齐的问题，假设我们设置数组中第三个元素为空，就会出现下面的情况： [图片] 原因很简单，inline-block的属性中在某个元素没有内容的情况下，它的基线对齐方式是基于这个元素的底边的，解决方式是设置一个垂直的对齐方式： [代码]/* index.wxss */ .view-parent{ display:inline-block; vertical-align: top; } [代码] 显示效果如下： [图片] 同时，你会发现第二种开启flex布局方法的横向列表不会有这种对齐的问题，我们还可以在装载滑动元素的容器中开启flex布局来让内容更加美观： [代码].view-item{ width:100px; height:100px; background:#1bf891; margin-right: 20px; align-items:center; display:flex; justify-content:center; } [代码] 显示效果如下： [图片] 总结 scroll-view是一个十分常见实用的组件，但是使用时也有一些需要注意的问题，比如不支持直接使用flex布局。总体来看，比起设置inline-block的布局，更推荐在scroll-view中嵌套一层view再开启flex布局的方法，可以更灵活的摆放控制滑动元素。

最近准备给自己的小程序做个直播功能，看下直播所需要的一些资质，瞬间被吓止步。后面发现小程序官方出了直播插件，这就为小程序接入直播提供的诸多便利。仅仅需要一些简单的配置，就可以轻松实现直播功能了。下面带大家来一步步给自己的小程序添加直播功能吧。 老规矩，先看效果图 [图片] 一，首先要给你的小程序开通直播插件功能 登录我们的小程序后台，可以看到如下图所示的直播 [图片] 点击一下，就可以进入小程序直播开通页面 [图片] 注意我们上图红色框里的一些要求。必须要满足这些条件，才可以开通直播功能。更详细些的如下： [图片] 这就注定目前只能是通过认证的企业小程序才可以开通直播功能了。个人小程序目前是没法开通的。我刚开始还不信，用我的个人小程序试了试。结果就如下图，后面没办法就注册了一个企业小程序。 [图片] 并且小程序的服务类目也要符合官方要求 [图片] 到这里，才算真正开通了小程序直播功能。 [图片] 二，创建直播间 点击创建直播间 [图片] 选择手机直播 [图片] 这里需要用一个实名认证的微信做主播端。 [图片] 认证后如下： [图片] 这里设置直播的一些封面等信息 [图片] 直播间创建成功后如下 [图片] [图片] 这里的直播码，扫码后就可以直接开播了，还有这里的房间号一定要记牢，后面会用到。 [图片] 这里可以往直播间里添加商品，优惠券等 [图片] 下面就是根据官方文档来代码实现直播功能了 三，直播功能的代码实现 我们创建号直播间以后，接下来就要在小程序代码里实现直播功能了。 1，首先是要创建一个小程序项目 至于如何创建小程序项目我这里就不再教大家了，如果你还不知道如何创建小程序项目，建议你去翻下我的历史文章，或者看看我录的《10小时零基础入门小程序开发》 创建好的小程序项目如下 [图片] 2，在app.json里添加直播插件 其实官方的接入文档写的很清晰了。下面把官方文档贴出来给大家：https://developers.weixin.qq.com/miniprogram/dev/framework/liveplayer/live-player-plugin.html [图片] 我们只需要把上面红色框里的代码复制到app.json里就可以了。记得把注释去掉 [图片] 一定要记得，除了把注释去掉之外，其他的都不要做改动。 3，然后编写可以跳转到直播间的代码 代码很简单，就写一个button按钮，然后添加点击事件即可。 [图片] 点击事件如下 [图片] 其实官方文档里也有讲 [图片] 直播房间的房间id我们在创建直播间成功后其实可以拿的到的。 [图片] 到这里我们的直播功能就完整的实现了。下面我们来看看都有哪些直播状态 四，直播状态的显示 未开播状态，这里我们可以订阅开播提醒，等开播的时候，会有订阅消息提醒。 [图片] 如果你订阅开播提醒了，还会有开播提醒 [图片] 直播结束状态 [图片] 主播暂时离开 [图片] 主播端网络异常中断 [图片] 主播端可以设置美颜等功能 [图片] 并且我们的小程序直播间里可以设置优惠券，抽奖，添加商品。 [图片] 直播结束后，还有回放功能 [图片] 好，到这里就给大家把小程序直播功能完整的讲解完了。由于代码量太少，实现起来比较简单，所以就不给大家录讲解视频了。

mp-html小程序富文本组件 news欢迎加入 QQ 交流群：699734691示例小程序添加获取组件包功能[图片] 功能介绍 支持在多个平台使用 支持丰富的标签（包括 table、video、svg 等） 支持丰富的事件效果（自动预览图片、链接处理等） 支持锚点跳转、长按复制等丰富功能 支持大部分 html 实体 丰富的插件（关键词搜索、内容编辑等） 效率高、容错性强且轻量化使用方法1. npm 方式 在项目根目录下执行 npm install mp-html 开发者工具中勾选 使用 npm 模块 并点击 工具 - 构建 npm 在需要使用页面的 json 文件中添加 { "usingComponents": { "mp-html": "mp-html" } } 在需要使用页面的 wxml 文件中添加 <mp-html content="{{html}}" /> 在需要使用页面的 js 文件中添加 Page({ onLoad() { this.setData({ html: 'Hello World!'   })  } }) 2. 源码方式 将源码中的代码包（dist/mp-weixin）拷贝到 components 目录下，更名为 mp-html 在需要使用页面的 json 文件中添加 { "usingComponents": { "mp-html": "/components/mp-html/index" } } 后续步骤同上 获取github 链接：https://github.com/jin-yufeng/mp-html npm 链接：https://www.npmjs.com/package/mp-html 文档链接：https://jin-yufeng.gitee.io/mp-html

wx-gesture-lock  微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo：百度小说搜索 shitoujiandaobu 小程序：石头剪刀布（附代码说明） audiodemo 微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义 star 微信小程序开发之五星评分 switchCity 微信小程序开发之城市选择器 城市切换 huadong_del  微信小程序滑动删除效果 jianhang_menu 微信小程序开发之圆形菜单 仿建行圆形菜单 xiaoxiaoxiao_lazyload  实现微信小程序图片懒加载特效 kangaiduowei  微信小程序：康爱多微商城：学习界面设计 tianmao_dazhuanpan  小程序实现大转盘 仿天猫抽奖 跑马灯效果（有图有源码） weapp-meirong  微信小程序学习用demo推荐：美容商城；列表，预约 baisi  微信小程序仿百思不得姐 weapp-one 仿 「ONE · 一个」 的微信小程序 netmusic-app  仿网易云音乐APP的微信小程序 a_takeaway  微信小程序的外卖demo sideslip  微信小程序『侧边栏滑动』特效 wx_plo  微信小程序之仿微信漂流瓶 kwonWhere 微信小程序-知亦行 audiodemo  微信小程序开发之视频播放 弹幕 弹幕颜色自定义 wxChart  微信小程序图标插件 guoku  微信小程序-果库 snake  微信小程序-贪吃蛇小程序 douban_movie  微信小程序-仿豆瓣电影 RecordDemo  麦克风动画 shishanggou  实现了包括常用组件，ajax获取数据，模板使用，路由等的使用，下拉刷新数据；

1. vonic vonic 一个基于 vue.js 和 ionic 样式的 UI 框架，用于快速构建移动端单页应用，很简约。 中文文档 | github地址 | 在线预览 [图片] 2. vux vux 基于WeUI和Vue(2.x)开发的移动端UI组件库。基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。小编在开发微信公众号的时候使用过，欢迎来评论区吐槽。 中文文档 | github地址 | 在线预览 [图片] 3. Mint UI Mint UI 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库。 中文文档 | github地址 | 在线预览 [图片] 4. Muse-UI 基于 Vue 2.0 和 Material Design 的 UI 组件库 中文文档 | github地址 [图片] 5. Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。 中文文档 | github地址 | 在线预览 [图片] 6. Cube-UI 滴滴 WebApp 团队 实现的 基于 Vue.js 实现的精致移动端组件库 中文文档 | github地址 | 在线预览 [图片] 7. vue-ydui Vue-ydui 是 YDUI Touch 的一个Vue2.x实现版本，专为移动端打造，在追求完美视觉体验的同时也保证了其性能高效。目前由个人维护。 中文文档 | github地址 | 在线预览 [图片] 8. Mand-Mobile 面向金融场景的Vue移动端UI组件库，丰富、灵活、实用，快速搭建优质的金融类产品。 中文文档 | github地址 | 在线预览 [图片] 9. v-charts 在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。特别感谢 @书简_yu 的贡献。 中文文档 | github地址 | 在线预览 [图片] 10. Vue Carbon Vue Carbon 是基于 vue 开发的material design ui 库。 中文文档 | github地址 | 在线预览 [图片] 11. Quasar Quasar（发音为/kweɪ.zɑɹ/)是MIT许可的开源框架（基于Vue），允许开发人员编写一次代码，然后使用相同的代码库同时部署为网站、PWA、Mobile App和Electron App。使用最先进的CLI设计应用程序，并提供精心编写，速度非常快的Quasar Web组件。 中文文档 | github地址 [图片] 12. Vue-recyclerview 使用vue-recyclerview掌握大型列表。 github地址 | 在线预览 [图片] 13. Vue.js modal 易于使用，高度可定制，移动友好的Vue.js 2.0+ modal。 在线文档 | github地址 | 在线预览 [图片] 14. Vue Baidu Map Vue Baidu Map是基于Vue 2.x的百度地图组件。 中文文档 | github地址 | 在线预览 [图片] 15. Onsen UI 将Vue.js的强大功能和简单性带入混合和渐进式Web应用程序。 在线文档 | github地址 | 在线预览 [图片] 相关文章 Vue PC端框架 别走，还有后续呐······ 如果小伙伴们有比较好的移动端框架，欢迎在评论区留言砸场，我会持续更新在简书上，谢谢你的贡献。

好的经验必须要分享：chooseImage后转base64 现在网上各种帖子的解决方案存在各种各样的问题，不说了，直接贴代码，手机亲测，没有问题 const fileManager = wx.getFileSystemManager(); [图片]

- 需求的场景描述（希望解决的问题） 通过使用swiper使用手势切换页面组件，但swiper无法高度自适应，需要通过内置scroll-view撑可视区域,但scroll-view的使用会阻断onPagePullRefresh，无法使用页面级的刷新。 - 希望提供的能力 scroll-view能够支持下拉刷新或者swiper高度适应