背景 俗话说，产品有三宝：弹窗、浮层加引导，足以见弹窗在产品同学心目中的地位。对任意一个刚入门的前端同学来说，实现一个模态框基本都可以达到信手拈来的地步，但是，当模态框里边的内容滚动起来以后，就会出现各种各样的让人摸不着头脑的问题，其中，最出名的想必就是滚动穿透。 什么是滚动穿透？ 滚动穿透的定义：指我们滑动顶层的弹窗，但效果上却滑动了底层的内容。 具体解决方案分析如下： 改变顶层：从穿透的思路考虑，如果顶层不会穿透过去，那么问题就解决了，所以我们尝试给蒙层加catchtouchmove，但是发现部分场景无效果，那么就不再赘述了。 改变底层：既然是顶层影响了底层，要是底层不会滚动，那就没这个问题了。 如何改变底层解决该问题呢？ 不成熟方案： 底部页面最外层view设置position: fixed;页面不可滚动，但是这个时候会导致页面回到顶部。 滚动时监听滚动距离，弹窗时记录滚动位置，关闭弹窗后使用wx.pageScrollTo回滚到记录的位置。 成熟方案 使用page-meta组件，通过该组件我们可以操作Page的style样式，类似于h5里body设置overflow: hidden; 控制页面不可滚动。文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html 使用wx.setPageStyle设置overflow: hidden， 也可以实现给Page组件设置样式。） page-meta组件： 通过该组件我们可以直接操作[代码]Page[代码]组件 ，我们给它的wxss样式overflow动态设置[代码]hidden[代码]or[代码]visible[代码]or[代码]auto[代码] 就可以控制整个页面是否可以滚动。 [图片] wx.setPageStyle方法： 调用这个api，动态设置它为hidden/auto，用于控制页面是否可滚动，主要用于页面组件内使用，比如封装好的弹窗组件，就不用单独写page-meta组件了。。 [代码]wx.setPageStyle({ style: { overflow: 'hidden' // ‘auto’ } }) [代码] 老规矩，结尾放代码片段： https://developers.weixin.qq.com/s/U6ItgQmP7upQ 拓展 支付宝小程序虽然存在page-meta组件，但是由于内核为69版本，给page设置overflow: hidden 也无法控制底部元素不可滚动，目前已联系支付宝的底层开发同学提供API控制页面disableScroll，目前正在封装Appx，近期开放。

场景： 在小程序中大家应该都有这样的场景，在onLaunch里用wx.login静默登录拿到code，再用code去发送请求获取token、用户信息等，整个过程都是异步的，然后我们在业务页面里onLoad去用的时候异步请求还没回来，导致没拿到想要的数据，以往要么监听是否拿到，要么自己封装一套回调，总之都挺麻烦，每个页面都要写一堆无关当前页面的逻辑。 直接上终极解决方案，公司内部已接入两年很稳定： 1.可完美解决异步问题 2.不污染原生生命周期，与onLoad等钩子共存 3.使用方便 4.可灵活定制异步钩子 5.采用监听模式实现，接入无需修改以前相关逻辑 6.支持各种小程序和vue架构 。。。 //为了简洁明了的展示使用场景，以下有部分是伪代码，请勿直接粘贴使用，具体使用代码看Github文档 //app.js //globalData提出来声明 let globalData = {   // 是否已拿到token   token: '',   // 用户信息   userInfo: {     userId: '',     head: ''   } } //注册自定义钩子 import CustomHook from 'spa-custom-hooks'; CustomHook.install({  'Login':{     name:'Login',     watchKey: 'token',     onUpdate(token){       //有token则触发此钩子       return !!token;     }   },  'User':{     name:'User',     watchKey: 'userInfo',     onUpdate(user){       //获取到userinfo里的userId则触发此钩子       return !!user.userId;     }   } }, globalData) // 正常走初始化逻辑 App({ globalData, onLaunch() { //发起异步登录拿token login((token)=>{ this.globalData.token = token //使用token拿用户信息 getUser((user)=>{ this.globalData.user = user }) }) } }） //关键点来了 //Page.js，业务页面使用 Page({   onLoadLogin() { //拿到token啦，可以使用token发起请求了 const token = getApp().globalData.token },   onLoadUser() { //拿到用户信息啦 const userInfo = getApp().globalData.userInfo },   onReadyUser() { //页面初次渲染完毕 && 拿到用户信息，可以把头像渲染在canvas上面啦 const userInfo = getApp().globalData.userInfo // 获取canvas上下文 const ctx = getCanvasContext2d() ctx.drawImage(userInfo.head,0,0,100,100) },   onShowUser() { //页面每次显示 && 拿到用户信息，我要在页面每次显示的时候根据userInfo走不同的逻辑 const userInfo = getApp().globalData.userInfo switch(userInfo.sex){ case 0: // 走女生逻辑 break case 1: // 走男生逻辑 break } } }) 具体文档和Demo见↓ Github：https://github.com/1977474741/spa-custom-hooks 祝大家用的愉快，记得star哦

在小程序中，常常有些数据需要在几个页面或组件中共享。对于这样的数据，在 web 开发中，有些朋友使用过 redux 、 vuex 之类的 状态管理 框架。在小程序开发中，也有不少朋友喜欢用 MobX ，说明这类框架在实际开发中非常实用。 小程序团队近期也开源了 MobX 的辅助模块，使用 MobX 也更加方便。那么，在这篇文章中就来介绍一下 MobX 在小程序中的一个简单用例！ 在小程序中引入 MobX 在小程序项目中，可以通过 npm 的方式引入 MobX 。如果你还没有在小程序中使用过 npm ，那先在小程序目录中执行命令： [代码]npm init -y [代码] 引入 MobX ： [代码]npm install --save mobx-miniprogram mobx-miniprogram-bindings [代码] （这里用到了 mobx-miniprogram-bindings 模块，模块说明在这里： https://developers.weixin.qq.com/miniprogram/dev/extended/functional/mobx.html 。） npm 命令执行完后，记得在开发者工具的项目中点一下菜单栏中的 [代码]工具[代码] - [代码]构建 npm[代码] 。 MobX 有什么用呢？ 试想这样一个场景：制作一个天气预报资讯小程序，首页是列表，点击列表中的项目可以进入到详情页。 首页如下： [图片] 详情页如下： [图片] 每次进入首页时，需要使用 [代码]wx.request[代码] 获取天气列表数据，之后将数据使用 setData 应用到界面上。进入详情页之后，再次获取指定日期的天气详情数据，展示在详情页中。 这样做的坏处是，进入了详情页之后需要再次通过网络获取一次数据，等待网络返回后才能将数据展示出来。 事实上，可以在首页获取天气列表数据时，就一并将所有的天气详情数据一同获取回来，存放在一个 数据仓库 中，需要的时候从仓库中取出来就可以了。这样，只需要进入首页时获取一次网络数据就可以了。 MobX 可以帮助我们很方便地建立数据仓库。接下来就讲解一下具体怎么建立和使用 MobX 数据仓库。 建立数据仓库 数据仓库通常专门写在一个独立的 js 文件中。 [代码]import { observable, action } from 'mobx-miniprogram' // 数据仓库 export const store = observable({ list: [], // 天气数据（包含列表和详情） // 设置天气列表，从网络上获取到数据之后调用 setList: action(function (list) { this.list = list }), }) [代码] 在上面数据仓库中，包含有数据 [代码]list[代码] （即天气数据），还包括了一个名为 [代码]setList[代码] 的 action ，用于更改数据仓库中的数据。 在首页中使用数据仓库 如果需要在页面中使用数据仓库里的数据，需要调用 [代码]createStoreBindings[代码] 来将仓库中的数据绑定到页面数据中，然后就可以在页面中直接使用仓库数据了。 [代码]import { createStoreBindings } from 'mobx-miniprogram-bindings' import { store } from './store' Page({ onLoad() { // 绑定 MobX store this.storeBindings = createStoreBindings(this, { store, // 需要绑定的数据仓库 fields: ['list'], // 将 this.data.list 绑定为仓库中的 list ，即天气数据 actions: ['setList'], // 将 this.setList 绑定为仓库中的 setList action }) // 从服务器端读取数据 wx.showLoading() wx.request({ // 请求网络数据 // ... success: (data) => { wx.hideLoading() // 调用 setList action ，将数据写入 store this.setList(data) } }) }, onUnload() { // 解绑 this.storeBindings.destroyStoreBindings() }, }) [代码] 这样，可以在 wxml 中直接使用 list ： [代码]<view class="item" wx:for="{{list}}" wx:key="date" data-index="{{index}}"> <!-- 这里可以使用 list 中的数据了！ --> <view class="title">{{item.date}} {{item.summary}}</view> <view class="abstract">{{item.temperature}}</view> </view> [代码] 在详情页中使用数据仓库 在详情页中，同样可以使用 [代码]createStoreBindings[代码] 来将仓库中的数据绑定到页面数据中： [代码]import { createStoreBindings } from 'mobx-miniprogram-bindings' import { store } from './store' Page({ onLoad(args) { // 绑定 MobX store this.storeBindings = createStoreBindings(this, { store, // 需要绑定的数据仓库 fields: ['list'], // 将 this.data.list 绑定为仓库中的 list ，即天气数据 }) // 页面参数 `index` 表示要展示哪一条天气详情数据，将它用 setData 设置到界面上 this.setData({ index: args.index }) }, onUnload() { // 解绑 this.storeBindings.destroyStoreBindings() }, }) [代码] 这样，这个页面 wxml 中也可以直接使用 list ： [代码]<view class="title">{{list[index].date}}</view> <view class="content">温度 {{list[index].temperature}}</view> <view class="content">天气 {{list[index].weather}}</view> <view class="content">空气质量 {{list[index].airQuality}}</view> <view class="content">{{list[index].details}}</view> [代码] 完整示例 完整例子可以在这个代码片段中体验： https://developers.weixin.qq.com/s/YhfvpxmN7HcV 这个就是 MobX 在小程序中最基础的玩法了。相关的 npm 模块文档可参考 mobx-miniprogram-bindings 和 mobx-miniprogram 。 MobX 在实际使用时还有很多好的实践经验，感兴趣的话，可以阅读一些其他相关的文章。

介绍 me-waterfall 是一个微信小程序瀑布流组件库，实现简单，侵入性小，贴近 web 端的效果。 线上体验 扫描下方的小程序二维码，体验使用效果： [图片] 安装 方式一：使用 npm 安装（推荐） [代码]npm install me-waterfall [代码] 方式二：下载源码 将源码下载到本地，然后将 [代码]lib[代码] 目录拷贝到自己的项目中。 使用方法 在页面的 [代码]json[代码] 文件或 [代码]app.json[代码] 中引入组件： [代码]{ "usingComponents": { "me-waterfall": "/path/to/me-waterfall/waterfall/index", "me-waterfall-item": "/path/to/me-waterfall/waterfall-item/index" } } [代码] 然后就可以在 [代码]wxml[代码] 中直接使用了： [代码]<me-waterfall> <me-waterfall-item wx:for="{{list}}" wx:key="{{index}}"> <image src="{{item.src}}" style="height:{{item.height}}px;width:100%"/> </me-waterfall-item> </me-waterfall> [代码] API waterfall 组件 props 参数 说明 类型 默认值 是否必须 width 容器宽度，传入后将优先使用此值，呈现速度更快 Number - 否 column 列数 Number 2 否 gap 列与列之间的间距 Number 15 否 methods reflow 重新排列元素，在某些情形下，你可能希望在完成某些操作后对瀑布流进行重新排列，此时可以调用此方法： [代码]const waterfallInstance = this.selectComponent("#waterfall"); waterfallInstance.reflow(); [代码] 外部样式类 参数 说明 类型 默认值 是否必须 custom-class 外部样式类 String - 否 waterfall-item 组件 外部样式类 参数 说明 类型 默认值 是否必须 custom-class 外部样式类 String - 否 关于性能 首先，够用； 其次，由于微信小程序中获取元素尺寸的 api 为回调形式，因此排列内部元素时需要延迟，即等到容器宽度取到之后再进行排列，这会使得瀑布流呈现速度减慢；如果改为传入 [代码]width[代码]，呈现速度会更快。 捐赠 如果这个库有帮助，请 Star 这个仓库，让更多人发现它。 当然，也可以鼓励我一下： [图片] 开源协议 本项目基于 MIT 协议。

好久没发文章了，最近浏览社区看到比较多的请求封装，以及还有在使用原始请求的童鞋。为了减少代码，提升观赏性，我也水一篇吧，希望对大家有所帮助。 默认请求方式，大家每次都这样一些写相同的代码，会不会觉得烦，反正我是觉得头大 😂 [代码]wx.request({ url: 'test.php', //仅为示例，并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success (res) { console.log(res.data) } }) [代码] 来，进入正题吧，把这块代码封装下。 首先新建个request文件夹，内含request.js 代码如下： [代码]/** * 网络请求封装 */ import config from '../config/config.js' import util from '../util/util.js' // 获取接口地址 const _getPath = path => (config.DOMAIN + path) // 封装接口公共参数 const _getParams = (data = {}) => { const timestamp = Date.now() //时间戳 const deviceId = Math.random() //随机数 const version = data.version || config.version //当前版本号，自定或者取小程序的都行 const appKey = data.appKey || config.appKey //某个小程序或者客户端的字段区分 //加密下，防止其他人随意刷接口，加密目前采用的md5，后端进行校验，这段里面的参数你们自定，别让其他人知道就行，我这里就是举个例子 const sign = data.sign || util.md5(config.appKey + timestamp + deviceId) return Object.assign({}, { timestamp, sign, deviceId, version, appKey }, data) } // 修改接口默认content-type请求头 const _getHeader = (headers = {}) => { return Object.assign({ 'content-type': `application/x-www-form-urlencoded` }, headers) } // 存储登录态失效的跳转 const _handleCode = (res) => { const {statusCode} = res const {msg, code} = res.data // code为 4004 时一般表示storage里存储的token失效或者未登录 if (statusCode === 200 && (code === 4004)) { wx.navigateTo({ url: '/pages/login/login' }) } return true } /** * get 请求， post 请求 * @param {String} path 请求url，必须 * @param {Object} params 请求参数，可选 * @param {String} method 请求方式 默认为 POST * @param {Object} option 可选配置，如设置请求头 { headers:{} } * * option = { * headers: {} // 请求头 * } * */ export const postAjax = (path, params) => { const url = _getPath(path) const data = _getParams(params) //如果某个参数值为undefined，则删掉该字段，不传给后端 for (let e in data) { if (data[e] === 'undefined') { delete data[e] } } // 处理请求头，加上最近比较流行的jwtToken（具体的自己百度去） const header = util.extend( true, { "content-type": "application/x-www-form-urlencoded", 'Authorization': wx.getStorageSync('jwtToken') ? `Bearer ${wx.getStorageSync('jwtToken')}` : '', }, header ); const method = 'POST' return new Promise((resolve, reject) => { wx.request({ url, method, data, header, success: (res) => { const result = _handleCode(res) result && resolve(res.data) }, fail: function (res) { reject(res.data) } }); }) } [代码] 那么如何调用呢？ [代码]//把request的 postAjax注册到getApp()下，调用时： const app = getApp() let postData = { //这里填写请求参数，基础参数里的appKey等参数可在这里覆盖传入。 } app.postAjax(url, postData).then((res) => { if (res.success) { //这里处理请求成功逻辑。 } else { //wx.showToast大家觉得麻烦也可以写到util.js里，调用时：util.toast(msg) 即可。 wx.showToast({ title: res.msg || '服务器错误，请稍后重试', icon: "none" }) } }).catch(err => { //这里根据自己场景看是否封装到request.js里 console.log(err) }) [代码] config.js 主要是处理正式环境、预发环境、测试环境、开发环境的配置 [代码]//发版须修改version, env const env = { dev: { DOMAIN: 'https://dev-api.weixin.com' }, test: { DOMAIN: 'https://test-api.weixin.com', }, pro: { DOMAIN: 'https://api.qtshe.com' } } module.exports = { ...env.pro } [代码] 以上就是简单的一个request的封装，包含登录态失效统一跳转、包含公共参数的统一封装。 老规矩，最后放代码片段，util里内置了md5方法以及深拷贝方法，具体的我也不啰嗦，大家自行查看即可～ https://developers.weixin.qq.com/s/gbPSLOmd7Aft

最新：2020/06/13。修改为scroll-view与swiper联动效果,新增下拉刷新以及上拉加载效果。。具体效果查看代码片段，以下文章内容和就不改了 刚刚在社区里看到 有老哥在问如何做滚动的导航栏。这里简单给他写了个代码片段，需要的大哥拿去随便改改，先看效果图： [图片] 代码如下： wxml [代码]<scroll-view class="scroll-wrapper" scroll-x scroll-with-animation="true" scroll-into-view="item{{currentTab < 4 ? 0 : currentTab - 3}}" > <view class="navigate-item" id="item{{index}}" wx:for="{{taskList}}" wx:key="{{index}}" data-index="{{index}}" bindtap="handleClick"> <view class="names {{currentTab === index ? 'active' : ''}}">{{item.name}}</view> <view class="currtline {{currentTab === index ? 'active' : ''}}"></view> </view> </scroll-view> [代码] wxss [代码].scroll-wrapper { white-space: nowrap; -webkit-overflow-scrolling: touch; background: #FFF; height: 90rpx; padding: 0 32rpx; box-sizing: border-box; } ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } .navigate-item { display: inline-block; text-align: center; height: 90rpx; line-height: 90rpx; margin: 0 16rpx; } .names { font-size: 28rpx; color: #3c3c3c; } .names.active { color: #00cc88; font-weight: bold; font-size: 34rpx; } .currtline { margin: -8rpx auto 0 auto; width: 100rpx; height: 8rpx; border-radius: 4rpx; } .currtline.active { background: #47CD88; transition: all .3s; } [代码] JS [代码]const app = getApp() Page({ data: { currentTab: 0, taskList: [{ name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, ] }, onLoad() { }, handleClick(e) { let currentTab = e.currentTarget.dataset.index this.setData({ currentTab }) }, }) [代码] 最后奉上代码片段： https://developers.weixin.qq.com/s/nkyp64mN7fim

1. 写在前面 微信小程序下架了模板消息功能，取而代之的是订阅消息功能。这个订阅消息目前又分为「一次性订阅」和「永久订阅」。使用订阅消息也有一段时间了，感觉对新手订阅消息很容易让新开发者进入一个理解的误区，这里觉得有必要说出来 2. 理解误区 很多新手认为，只要用户勾选了小程序端订阅消息弹出时底部的「总是保持以上选择…」后，就可以「为所欲为」的不限次数的推送订阅消息给用户了。如下图： [图片] 3. 正确理解 如果你使用的「一次性订阅」模板（目前发现绝大多数开发者都是只能用一次性的，因为永久性的订阅消息申请门槛太高），那么勾选底部的「总是…」这个并不代表以后可以直接推送了。官方原话wx.requestSubscribeMessage的介绍里是这样写的： 3.1 官方说明 wx.requestSubscribeMessage(Object object) 基础库 2.8.2 开始支持，低版本需做兼容处理。 调起客户端小程序订阅消息界面，返回用户订阅消息的操作结果。当用户勾选了订阅面板中的“总是保持以上选择，不再询问”时，模板消息会被添加到用户的小程序设置页，通过 wx.getSetting 接口可获取用户对相关模板消息的订阅状态。 注意事项 一次性模板 id 和永久模板 id 不可同时使用。 低版本基础库2.4.4~2.8.3 已支持订阅消息接口调用，仅支持传入一个一次性 tmplId / 永久 tmplId。 2.8.2 版本开始，用户发生点击行为或者发起支付回调后，才可以调起订阅消息界面。 2.10.0 版本开始，开发版和体验版小程序将禁止使用模板消息 fomrId。 3.2 重点关注 这里重点关注第7条：「用户发生点击行为或者发起支付回调后，才可以调起订阅消息界面。」这就意味着你需要在用户主动点击某个组件是触发调用wx.requestSubscribeMessage方法再次订阅，订阅后，你才可以「为所欲为」推送一次模板消息，注意只能一次。下次再想推送时，需要用户再次点击触发wx.requestSubscribeMessage。 4. 破局方案 目前订阅消息功能，就是这么个情况，所以针对这个情况的替代方案有以下 4.1 永久性订阅消息 如果能达到申请「永久性订阅」消息的模板的门槛，那自然是极好的，直接用永久性模板「为所欲为」。 4.2 使用服务号的模板消息替代 比较常用的是使用公众号服务号的模板消息代替小程序的订阅消息功能，公众号的模板消息功能限制就比订阅号好多了，基本上可以「为所欲为」的推送。但是这个方案有个致命的运营成本：必须要用户关注公众号，还有小程序要跟公众号同一主体并绑定在开放平台下。同时开发成本有所增加，要采用unionId机制来打通小程序跟公众号的openId。这个具体的实现方案，大家有兴趣的话可以讨论下。笔者目前就是用这种方案的。 5. 几个注意点 5.1 官方提示 订阅消息如果选择选择‘总是保持以上选择，"不再询问"后的设置问题: 目前是选择‘总是保持以上选择，"不再询问"后，可以在设置中开启或拒绝接收，但不会再次拉起授权弹窗 6. 长期性订阅消息 请参考官方最新文档： 小程序模板消息能力调整通知 | 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/00008a8a7d8310b6bf4975b635a401 长期性订阅消息 一次性订阅消息可满足小程序的大部分服务场景需求，但线下公共服务领域存在一次性订阅无法满足的场景，如航班延误，需根据航班实时动态来多次发送消息提醒。为便于服务，我们提供了长期性订阅消息，用户订阅一次后，开发者可长期下发多条消息。 目前长期性订阅消息仅向政务民生、医疗、交通、金融、教育等线下公共服务开放，后期将逐步支持到其他线下公共服务业务。 7.题外话 鉴于被戴上各种「刷赞，冲级，让社区点赞“通货膨胀”」等等一些恶毒字眼（最近多了个职业回复的「雅称」），各种帽子戴得，做一个开发爱好者积极分享和解决各种问题太难了，姑且不论咱写一篇文章需要截图多少，单单排版就得废掉俺多少时间哈，很受伤，所以本人决定在微信开放者社区封笔。你看到是俺最后一篇发表在微信开放社区的文章。如果你想继续查看俺的一些文章可以私聊我。我会在其他平台保持继续创作。bye-bye~ 8. 最最重要的来了 看完后觉得有用记得点赞~~ ↓点赞处↓

先上效果图(无图无真相) [图片] 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(''); }, [代码] 好了基本就完成了一个表情组件的编写和调用 如果你想看完整的代码请点击这里 如果你想体验可以扫下面的二维码自己去体验下 [图片] 下篇 我们写写怎么实现一个简单的富文本编辑器

[图片] 这是生成的效果图,要完成这个功能其实只要引入第三方包就可以轻松的完成具体可参考: 原项目地址：https://github.com/Kujiale-Mobile/Painter 新版地址：https://github.com/shesw/Painter 1.首先在需要使用的页面引入 "usingComponents": {     "painter":"../../components/painter/painter"   } 2.这是我的wxml       /view> 3.这是我的wxss .box_image{   position: absolute;   margin: 0 auto;   top: 0rpx;   width: 514rpx;   border-radius: 10rpx; } .box{   position: fixed;   height: 900rpx;   top: 20%;   left: 132rpx;   z-index: 999;   width:514rpx; } 4.这是我的js data:{ template: {}, image:"" }   canvasSuc(e) {     wx.hideLoading()     this.setData({       image: e.detail.path,       show_share: false     })  },  getDraw() {     wx.showLoading({       title: '正在努力生成中',     })     this.setData({       template: {         background: '#fff',         width: 750 + 'rpx',         height: 1200 + 'rpx',         align: 'center',         views: [{           type: 'image',           url: 'https://vrjgd.oss-cn-hangzhou.aliyuncs.com/%E5%BA%97%E9%93%BA%E6%B4%BB%E5%8A%A8-bg.png',           css: {             top: '0px',             right: '0px',             width: '750rpx',             height: '900rpx',             mode: "widthFix"           },         },         {           type: 'image',           url: 'https://vrjgd.oss-cn-hangzhou.aliyuncs.com/%E6%96%87%E6%A1%88%E8%83%8C%E6%99%AF%403x.png',           css: {             top: '268rpx',             right: '45rpx',             width: '660rpx',             height: '84rpx',             mode: "widthFix"           },         },         {           type: 'image',           url: 'http://vrjgd.oss-cn-hangzhou.aliyuncs.com/pcw/Cm8fPRsSXS.png',           css: {             top: '400rpx',             left: '26rpx',             width: '324rpx',             height: '400rpx',             mode: "widthFix"           },         },         {           type: 'image',           url: 'http://vrjgd.oss-cn-hangzhou.aliyuncs.com/pcw/Cm8fPRsSXS.png',           css: {             top: '400rpx',             right: '26rpx',             width: '324rpx',             height: '400rpx',             mode: "widthFix"           },         },         {           type: 'image',           url: 'https://vrjgd.oss-cn-hangzhou.aliyuncs.com/7785499/1592556154750/303876.jpg',           css: {             top: '400rpx',             left             : '26rpx',             width: '324rpx',             height: '300rpx',             mode: "widthFix"           },         },         {           type: 'image',           url: 'https://vrjgd.oss-cn-hangzhou.aliyuncs.com/7785499/1592556154750/303876.jpg',           css: {             top: '400rpx',             right: '26rpx',             width: '324rpx',             height: '300rpx',             mode: "widthFix"           },         },         {           type: 'image',           url: 'http://vrjgd.oss-cn-hangzhou.aliyuncs.com/pcw/sMhA2YRBsd.png',           css: {             top: '660rpx',             left: '26rpx',             width: '320rpx',             height: '60rpx',             mode: "widthFix"           },         },         {           type: 'image',           url: 'http://vrjgd.oss-cn-hangzhou.aliyuncs.com/pcw/sMhA2YRBsd.png',           css: {             top: '660rpx',             right: '26rpx',             width: '320rpx',             height: '60rpx',           },         },         {           type: 'text',           text: '60',           css: {             top: '670rpx',             left: "66rpx",             fontSize: '34rpx',             color: "#fff",                       },         },         {           type: 'text',           text: '60',           css: {             top: '675rpx',             left: "126rpx",             fontSize: '28rpx',             color: "#fff",             textDecoration: 'line-through',                       },         },         {           type: 'text',           text: '60',           css: {             top: '670rpx',             right: "266rpx",             fontSize: '34rpx',             color: "#fff",                       },         },         {           type: 'text',           text: '60',           css: {             top: '675rpx',             right: "206rpx",             fontSize: '28rpx',             color: "#fff",             textDecoration: 'line-through',                       },         },         {           type: 'text',           text: '商品名称名8个字',           css: {             top: '740rpx',             right: "66rpx",             fontSize: '34rpx',             color: "#fff",                       },         },         {           type: 'text',           text: '商品名称名8个字',           css: {             top: '740rpx',             left: "66rpx",             fontSize: '34rpx',             color: "#fff",                       },         },         {           type: 'image',           url: 'https://vrjgd.oss-cn-hangzhou.aliyuncs.com/1525ead3c1f45071184.png',           css: {             bottom: '40rpx',             right: '40rpx',             width: '200rpx',             height: '200rpx',           },         },         {           type: 'image',           url: 'https://vrjgd.oss-cn-hangzhou.aliyuncs.com/7785499/1592556154750/303876.jpg',           css: {             bottom: '70rpx',             left: '40rpx',             width: '160rpx',             height: '160rpx',             borderRadius: '50%',           },         },         {           type: 'text',           text: '欢迎来到我的店铺',           css: {             top: '290rpx',             left: "250rpx",             fontSize: '34rpx',             color: "#fff",                       },         },         {           type: 'text',           text: '店铺名称限制8字',           css: {             bottom: '160rpx',             left: "200rpx",             fontSize: '32rpx',             color: "#000",                       },         },         {           type: 'text',           text: '邀请码：12345678',           css: {             bottom: '100rpx',             left: "200rpx",             fontSize: '28rpx',             color: "#000",                       },         },         {           type: 'text',           text: '金戈多生鲜店铺',           css: {             top: '100rpx',             left: "380rpx",             fontSize: '48rpx',             color: "#fff",             align: 'center',                       },         },                 ],       }     })   },   previewImg() {     wx.previewImage({       current: this.data.image,       urls: [this.data.image],       success:res=>{         this.setData({           isbox:false         })       }     })   },

[图片] 你好，我是小桔，是一个没有感情的代码崽。 今天我想向你推荐一套船新全新的微信小程序组件库：Lin UI，是兄弟就用它！ 简介 Lin UI 是由林间有风团队精心打造的一套微信小程序组件库，组件丰富、设计优美，并且拥有完整的商业案例，是您开发微信小程序的不二选择。 官方文档 Github 链接 码云 Gitee 链接 林间有风团队首页 PS：这篇文章不会介绍 Lin UI 如何使用，我仅向你介绍它的优点，如果想要了解使用方法欢迎前往文档官网查看 特点 现在市面上已经有了许多组件库：Vant Weapp、iView Weapp、Color UI、Wuss Weapp、Wux Weapp 等等等等，他们每一套也都能称得上是成熟的组件库。那我为什么还要使用 Lin UI 呢？ Lin UI 吸引我的地方主要有如下几点： 使用简单 设计好看 组件丰富 反馈及时 设计好看 Lin UI 的另一大特点就是视觉设计出众，因为林间有风有专业的 UI 设计师对组件样式进行设计，视觉方面甩其他样式靠开发者自己设计的组件库不止一条街。 文章开头，我罗列了一堆组件，其中有一套，主打视觉，那就是 Color UI，也挺好看（Color UI 的作者也曾是一名设计师）。但是 Color 是一套 css 库，并不是组件库，至于具体区别，可以 Google 一下。 我们先来看几个反面例子，这么”朴实无华“的样式，你真的喜欢吗 [图片] 我们再来看一下 Lin Ui 是什么样子 [图片] [图片] 怎么样，哪个好看应该不用我多说了吧 组件丰富 Lin UI 一共包含 54 个组件，不管你用于什么场景，基本都可以满足你 90% 的需求，剩下的 10% ，可以通过提 Issue 的方式及时得到解决 [图片] 使用简单 开发过小程序的开发者可能都知道，小程序相比传统 Web 来说，会简单很多，因为我们不需要去处理多端设备上的屏幕兼容问题，这是小程序的一个优势。但是，如果因为引入一套组件库，让你失去了开发简单这项优势，那还值得去使用它吗？ Vant Weapp 是业内非常成熟的一套组件库，它的开发也历经了很长的周期。但是，在我看来，Vant Weapp 的一大缺点就是组件源码非常复杂。这种复杂并不是说他的逻辑有多复杂，而是 Vant Weapp 对代码做了大量的封装，我们看一下下面的代码： [代码]import { VantComponent } from '../common/component'; import { button } from '../mixins/button'; import { openType } from '../mixins/open-type'; VantComponent({ mixins: [button, openType], data: { baseStyle: '' } )} [代码] 这是 Vant Weapp 的 Button 组件部分源码，我们知道，Button 组件几乎是没有业务逻辑的，但是它却引入了 [代码]VantComponent[代码]、[代码]button[代码]、[代码]openType[代码]三个 ts 文件。 [图片] 是不是一脸懵逼？[代码]VantComponent[代码]是啥？小程序原生的[代码]Component[代码]呢？[代码]button[代码]又是啥？[代码]openType[代码]又是什么鬼？甚至源码还是用 TypeScript 写的，我写个小程序还得先去学一遍 TypeScript ？ 如果你刚接触小程序和 Vant Weapp，这种高度封装的特性会导致一个非常严重的问题：**当你在开发中遇到一个文档解决不了的问题想翻看源码时，你会发现你看不懂，你必须得理解其整套设计思想才能看懂其中每个组件的逻辑。**很浪费时间对不对？ Lin UI 就完全不存在这个问题，只要你懂 js 识字就能看懂源码，不信你看 [代码]Component({ properties: { /** * 折叠面板类型 */ type: { type: String, value: 'normal' }, }, methods: { /** * 关闭所有打开的collapse-item */ foldAllExpandItem(collapseItem) { for (let i = 0; i < this.data._expandItems.length; i++) { if (collapseItem !== this.data._expandItems[i]) { this.data._expandItems[i].foldContent(); } } this.data._expandItems = []; } }); [代码] 这是 Lin UI [代码]IndexList[代码] 组件的源码，因为篇幅问题，只截取了部分。为什么说只要识字就能看懂，因为我们对方法进行了详细的注释，并且没有对微信原生 api 进行二次封装，完全原生的写法，保证你能看懂源码，这么贴心，就问你感不感动！ [图片] 总结：如果你非常熟悉小程序的各种 api 、熟悉 ts、并且在遇见 bug 时有耐心去理解高度封装的设计思想，那么你可以使用 Vant Weapp。反之，如果你刚接触小程序，或者不会 ts 、在遇见 bug 时想要以最快的速度解决 bug，那么 Lin UI 会给你最舒适的开发体验。 反馈及时 一个开源项目，其活跃度是非常重要的。反馈的 Bug 能否得到及时的解决，有好的想法能否的项目作者接纳并加入项目之中，以及使用这个项目的人数。这三点是在进行技术选型时必须要考虑的问题。 Lin UI 的反馈效率非常高，Issue 反馈的 Bug 平均能在 24 小时内得到解决，这已经是非常高的效率了。相比 Vant Weapp，因为其维护者都是在职开发者，所以时间并不会太充裕，Issue 处理速度肯定也会慢于 Lin UI 的。 [图片] 结语 Lin UI 从 2019 年 4 月 24 日 发布第一个版本 0.1.0 以来，经过了一年多的迭代更新，600 多次 commit，300 多个 issue，换来的是现在已经足够稳定且易用的 Lin UI 。如果喜欢，也欢迎到 Github 上贡献一颗 Star 。 我是小桔，欢迎关注我的微信公众号，带你了解更多前后端知识。 [图片]