个人中心 | 微信开放社区

[填坑手册]小程序新版订阅消息+云开发实战与跳坑

[图片] 老版本的订阅消息在2020年1月10日就下线了，相信不少人在接入新版本订阅系统的时候，或多或少会遇到一些问题，这里智库君跟大家介绍下新版订阅的机制和不需要node/后端的情况下独立完成功能开发。一、新版订阅的机制其实开发过程不难，但是要理清楚它里面的机制，智库君还是花了一些时间的，也踩了不少坑先来看下官方介绍： [图片] 可以设置多个订阅选项感叹号里面可以看到详情有个默认不被选中的“总是”选项这些就是新不同的地方，智库君在开发的时候也有很多疑问，点了“总是”再点“取消”按钮会怎样？部分选择订阅会怎样？下面为大家一一梳理（1）部分选中 [图片] 比如现在有三个选项 A,B,C，用户**“部分选中”**返回的情况： [图片] 这里用真机调试可以看到，有个返回值状态为“reject”。如果我们反复几点点击同一个订阅后，这些值是如何计算的呢？举例： [图片] 从这里看出，微信系统会自动记录用户点击的次数，并且做累加记录，如果用户只允许2次发送，而开发者发送了3次，最后一次将会被拒绝。（2）点击“总是保持以上选择，不再询问”的情况 [图片] 当用户点击“总是”之后，同一个类型的订阅将不再弹出，那如果有多个订阅选项呢？举例订阅AAA 三个订阅模板为 X Y Z 订阅BBB 二个订阅模板为 Y W 这时候如果“订阅AAA”按钮选择了“总是”，那么再点击“订阅BBB”按钮，将只会弹出一个选项“W”,不会有 “Y” 的模板，因为在之前 “订阅AAA” 按钮中已经包含了。 [代码]wx.requestSubscribeMessage({ tmplIds: ["MECDDOdhbC3SrQmMY5XrfqiIGbMTzpEN8Z7ScXJfcd0", "iSb2NIlNnnO60wlI-8Wx5Pe82jR7TRdwjotSXtM1-ww"], success(res) { console.log(res); } }) [代码] 显示内容仅一个选项： [图片] 这里需要注意，“总是”选项是全局有效，不区分页面，选中“总是”的 W,X,Y,Z的模板，在全局任意页面中再次调用，再次调用将不再会显示！ [图片] 返回值无提示用户是否选中“总是”。（3）用户点击“总是”后，获取状态 [图片] [代码]wx.getSetting({ withSubscriptions: true, success(res) { console.log(res.authSetting) // res.authSetting = { // "scope.userInfo": true, // "scope.subscribeMessage": true // } console.log(res.subscriptionsSetting) // res.subscriptionsSetting = { // SYS_MSG_TYPE_INTERACTIVE: 'accept', // SYS_MSG_TYPE_RANK: 'accept', // zun-LzcQyW-edafCVvzPkK4de2Rllr1fFpw2A_x0oXE: 'reject', // ke_OZC_66gZxALLcsuI7ilCJSP2OJ2vWo2ooUPpkWrw: 'ban', // } } }); [代码] [图片] 这里可以调用wx.getSetting方法，但是需要注意：如果用户第一次选“总是”后点击“取消”按钮或者订阅模板全部是未选中/reject的，那将获取不到状态（这里可能是BUG，期待官方未来修复）。（4）用户点击“总是”后，让用户手动修改前面说到用户点击“总是”后，系统将不再弹窗，但是我们可以通过**“wx.openSetting”**引导用户手动修改。 [代码]wx.openSetting({ success(res) { console.log(res.authSetting) // res.authSetting = { // "scope.userInfo": true, // "scope.userLocation": true // } } }) [代码] [图片] [图片] 当然用户自己也可以修改 [图片] 总结【重点】选择“总是”，很多人认为就可无限发送订阅消息，这个是错误的，勾选和不勾选唯一的区别就是每次触发订阅的时候会不会弹授权窗口！！！用户点击次数系统会自动累加，直接影响后台发送通知的次数。用户选择“总是”后，小程序界面不再弹窗，但仍然有回调/callback。任意订阅模板在用户选中“总是”（包括接受/拒绝2个状态）后，全局有效，就算其他订阅包含“此模板”也不再显示/弹出当用户选择“总是”中“accept/选中/接受”的状态后，可以在wx.getSetting查询到用户是否选择“总是”。当用户选择“总是”中“reject/未选中/拒绝”的状态后，返回值“无感知”（这里可能是BUG）二、功能开发使用微信自带的云开发，可以在没有node/后端开发支持下，完成整个订阅流程的开发。（1）微信后台设置订阅模板和获取模板ID 1、打开小程序后台，找到订阅消息设置 [图片] 2、在公共模板库找模板或者自己申请新模板，建议能用现成模板用现成的，因为申请周期可能较长，且容易被拒 [图片] 3、选好模板后，点击详情 [图片] 4、查看模板内容和发送DATA的结构 [图片] 5、复制模板ID （2）配置云函数 [图片] [图片] 1、新建getOpenId云函数，用于获取用户的openID [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() // 云函数入口函数 exports.main = async (event, context) => { const wxContext = cloud.getWXContext() return { event, openid: wxContext.OPENID, appid: wxContext.APPID, unionid: wxContext.UNIONID, } } [代码] 2、新建订阅推送通知云函数 [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() //订阅推送通知 exports.main = async (event, context) => { try { const result = await cloud.openapi.subscribeMessage.send({ touser: event.openid, //接收用户的openId page: 'pages/my/index', //订阅通知需要跳转的页面 data: { //设置通知的内容 thing1: { value: '小程序订阅填坑' }, thing2: { value: '智库方程式' }, thing3: { value: '一起学习，一起进步' } }, templateId: '5Efr7IqIooYO9nPw047Iggxbm9Ge2Km10GQ4amGOUac' //模板id }) console.log(result) return result } catch (err) { console.log(err) return err } } [代码] 写完云函数记得右键部署下！！！（3）小程序代码部分 [代码] <button bindtap="getOpenId" type='primary'>获取openId</button> <view class="subBtn" catch:tap="sub">订阅AAA</view> <view class="subBtn" catch:tap="send">订阅推送测试</view> <view class="subBtn" catch:tap="setting">设置“总是”后，跳转修改</view> [代码] [代码]//JS 部分 //获取用户的openid getOpenId() { wx.cloud.callFunction({ name: "getOpenId" }).then(res => { let openid = res.result.openid console.log("获取openid成功", openid) }).catch(res => { console.log("获取openid失败", res) }) }, //发送模板消息给指定的openId用户 send(openid){ wx.cloud.callFunction({ name: "sendSub", data: { openid: openid } }).then(res => { console.log("发送通知成功", res) }).catch(res => { console.log("发送通知失败", res) }); }, //消息订阅 sub: function () { wx.requestSubscribeMessage({ tmplIds: ["5Efr7IqIooYO9nPw047Iggxbm9Ge2Km10GQ4amGOUac"], success(res) { console.log("订阅授权成功："+res); }, fail(res){ console.log("订阅授权失败：" + res); } }) }, //帮助用户跳转修改订阅状态 setting:function(){ wx.openSetting({ success(res) { console.log(res.authSetting) // res.authSetting = { // "scope.userInfo": true, // "scope.userLocation": true // } } }) }, [代码] （4）测试流程点击发送通知后，获得这样的效果： [图片] [图片] 获得对应返回值： [图片] 当errCode为0时，即发送通知成功。当errCode为43101，说明用户只授权了一次，但是你发送了2次，超过用户授权次数。 [图片] 三、进阶与思考 1、当你有多个订阅模板同时需要用户选择时，你可以通过以下代码记录，用户哪些选了，哪些没选。 [代码]wx.requestSubscribeMessage({ tmplIds: ["5Efr7IqIooYO9nPw047Iggxbm9Ge2Km10GQ4amGOUac", "OBB_Z10eh_Inm9p8EU6Ml_NS_mijXgTz3T07cxgKvX0","5Efr7IqIooYO9nPw047Iggxbm9Ge2Km10GQ4amGOUac"], success(res) { //console.log(res); if (res.errMsg == "requestSubscribeMessage:ok") { let acceptArray = []; //用户授权模板列表 for (let i = 0; i < tmplIds.length; i++) { const element = tmplIds[i]; if (res[element] == "accept") { acceptArray.push(element); } }; console.log(acceptArray); if (acceptArray.length > 0) { //执行下一步函数 } } } }) [代码] 2、一个关于是否需要记录用户对某个“订阅模板授权的次数”，以控制后台“发送的次数”，智库君在实战中认为，其实没有必要，顶多就是你发送返回一个错误码，微信之所有记录用户授权次数，也是为了保护用户不被骚扰。 3、你只需要记录用户点击了哪些需要授权的模板就行，为了是用户点击订阅后，改变按钮的状态，避免订阅按钮反复弹窗的问题，同时当检测到用户点错“总是”按钮后，可以自动跳转到“设置”界面。 4、这次智库君主要给大家简单介绍了下订阅全流程。后面大家可以根据自己的需要，添加和改进这些代码。比如：配置云函数中的node函数，实现定时发送配置云函数中的数据库，实现内容的自定义发送最后，希望这篇文章能帮助到大家，一起学习，一起进步！（官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message.html）往期回顾： [打怪升级]小程序自定义头部导航栏“完美”解决方案 [填坑手册]小程序Canvas生成海报（一） [拆弹时刻]小程序Canvas生成海报（二）

2021-09-13

28收藏6评论9868浏览

模板消息会下线，那统一服务消息是否也会下线？

会下线，小程序模板消息接口、统一服务消息接口均会下线。具体可参考公告说明：https://developers.weixin.qq.com/community/develop/doc/00008a8a7d8310b6bf4975b635a401

2019-10-18

4收藏13评论78150浏览

一眼告诉你什么是订阅消息了，看完就懂订阅消息。

消息通知有两种：一、A的动作后，发消息给A自己，这种容易解决，不多说明；二、A动作后，发消息给B（比如管理员、店家、楼主），如何保证B收到消息？这种是本方案要解决的问题。一张图片一眼告诉你什么是订阅消息，产品经理的设计UI居然让人一眼就知道订阅消息是什么玩意。 [图片] 用户 B （管理员、商家、组长、楼主）在知道订阅数不足后，打开小程序来续订阅数，否则没法收到订阅消息。 [图片] 补充一：关于勾选按钮，请注意话述是：“总是保持以上选择，不再询问”，而不是：“总是同意接收订阅消息”，不要幻想就成了永久性订阅消息；相当于你打电话订外卖，对店家说“老样子”，店家只会马上送一次外卖，而不是会以后每天自动给你送外卖了。勾选和不勾选的区别是什么呢？区别仅仅是：不勾选时，必须点击订阅10次，弹窗10次；勾选后，仍然必须点击订阅10次，但是不弹窗。无论如何“订阅”这个点击n次的动作少不了。补充二：一旦勾选后，就不可逆了，没有任何办法恢复或取消勾选了，除非你小程序MP后台换一次消息模板号(删除模板，重新添加一次)。补充三：关于如何保存订阅数。保存在数据库中，笔者用的是云开发，数据库表user结构如下： { _id:'openid1', nickName:'老张', msg:{ "tempId1":5, "tempId2":7, } } 补充四：关于如何获取订阅数。两种方式：一、wx.requestSubscribeMessage的回调success里获取；二、消息推送机制获取；https://developers.weixin.qq.com/miniprogram/dev/framework/server-ability/message-push.html

2022-09-21

55收藏61评论52817浏览

这个库能轻松解决99%的异步和逻辑加载时机问题（异步篇）

[图片] 你是否纠结过底层业务逻辑（登陆、获取用户信息等）到底是放app.js的onLaunch还是page的onLoad里比较好，或者因为异步问题被迫放在了onload，我们来分析一下优劣 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -我是分割线 - - - - - - - - - - - - - - - - - - - - - - - - - - - - 分析 onLaunch处理优点：底层业务逻辑集中并且只需写一次，比较好维护缺点：目前没有一个理想的方案来解决onLaunch和onLoad的异步问题，包括注册回调、重写onLoad、请求拦截等。 onLoad处理优点：因为不涉及跨页面通知，因此异步逻辑比较好处理缺点：每个页面都得写一次底层业务逻辑，非常繁琐，而且既然是公用的底层业务逻辑，分散在每个页面的onLoad里，好像也不大对劲。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -我是分割线 - - - - - - - - - - - - - - - - - - - - - - - - - - - - 抉择按照高内聚低耦合的原则，那逻辑和数据放onLaunch里肯定的，不应该和普通page逻辑耦合在一起，通用的数据和逻辑应该在入口去处理，执行一次到处使用，就像vue的main.js一样，会注册一些技术层的基础设施（路由、状态管理等插件），那业务层的基础设施不就是token、用户信息、所在位置等逻辑吗？ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -我是分割线 - - - - - - - - - - - - - - - - - - - - - - - - - - - - 想象中的最佳实践那我们的目标就是如何满足两者的优点，避免两者的缺点，做到真正的“高内聚低耦合” 1.保持底层业务逻辑写在入口app.js，避免耦合page里的逻辑 2.能在任何page里第一时间拿到globalData数据 3.使用方便，做到在业务开发中无感知，不需要写额外的调用、通知等代码 4.无任何副作用，不会影响其他功能，比如重写阻塞onLoad 5.灵活可配，适用以后此类任何业务 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -我是分割线 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 梦想成真先看一段代码 ⬇️ // page.js export default { name: 'Home', onLoadLogin(){ //登录成功（拿到token） && 页面初始化完成 //Tips：适用于某页面发送的请求依赖token的场景 }, onLoadUser(){ //页面初始化完成 && 获取用户信息完成 //Tips：适用于页面初始化时需要用到用户信息去做判断再走页面逻辑的场景 }, onReadyUser(){ //dom渲染完成 && 获取用户信息完成 //Tips：适用于首次进入页面需要在canvas上渲染头像的类似场景 }, onReadyShow(){ //小程序内页面渲染完成 && 页面显示 //Tips：适用于需要获取小程序组件或者dom，并且每次页面显示都会执行的场景 }, } 应该懂什么意思了吧？是不是你理想中的样子，使用起来跟没有似的 ⬆️ 这段示例代码满足了上面的第2、3、4条目标 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -我是分割线 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 再来看一段 ⬇️ // app.js // 配置自定义钩子，所有钩子都可以随意组合搭配使用，执行机制类似于Promise.all（但不是用Promise实现的） 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中数据 }, globalData) 怎么样，是不是很棒，依赖globalData，名字可配，连触发规则都可配，而且还附加了可随意组合的功能（意外还解决了页面内逻辑执行时机问题，在下篇讲） ⬆️ 这段示例代码满足了上面的第1、5条目标。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -我是分割线 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 是不是跃跃欲试了，那就赶紧试试，好用回来告诉我！ ⬇️（公司内部已接入两年了很稳定） GitHub：https://github.com/1977474741/spa-custom-hooks [图片]

2023-07-07

9收藏4评论2125浏览

小程序不同页面的异步回调，callback和promise的使用讲解

发个扫盲贴，大神请绕道。最近好多同学问我如何再请求数据成功后直接使用数据。我们通常的做法就是在请求成功后，再调用我们定义的方法，进而使用数据。如下代码 [代码] onLoad() { let that=this wx.cloud.database().collection("users").get({ success(res) { that.setData(res.data) }, fail(res) { } }) }, showData(dataList) { //.........做数据处理 }, [代码] 我们这样写其实也没什么不对，但是如果数据请求和使用是在两个不同的页面呢。比如我们在app.js里请求位置，获取用户信息。然后在首页index.js里要使用这些数据，那么我们这么写就有问题了。下面就来教大家两种方式来很好的解决这个问题。一，通过callback回调。先看下代码，然后我再具体给大家讲解下原理。 app.js里定义如下方法 [图片] 然后再index.js 里这么使用 [图片] 这时候，其实就可以看到了，我们在首页index.js里调用了app.js里的请求数据的方法，并且可以在index.js里直接使用数据。原理讲解原理其实很简单，就是我们在app.js里的获取数据的方法里定义一个参数。而这个参数和普通参数唯一不同的地方，就是这个参数是个function方法 [图片] 我们上图的callback参数，其实就是下图 function(result){} [图片] 把function方法作为一个参数传递进去的目的，就是为了下面的回调。 [图片] 我们这个callBack参数，可以在请求数据成功或者失败的时候作为一个方法调用。这样就可以把请求到的数据，回传回去了。讲的有点绕，不知道大家有没有被绕晕。这在java开发中，其实就相当于监听者模式。说白了就是在一个页面里监听另外一个页面的动作，如获取数据成功，当监听到数据获取成功这个动作以后，就可以直接把数据回传回来了。如果觉得这种方法有点绕，不好使用，我们就用下面的这个第二种方式。二，promise promise的好处就是可以不用那个层层传递，不用那么绕。还是先看代码，后面结合代码给大家讲下原理 app.js里定义如下方法 [图片] index.js里这么调用 [图片] 用句通俗的话说，就是通过promise让我们的数据请求和使用看上去是在同一个页面完成。怎么实现的呢 1，在app.js里把数据请求封装到promise里，然后把promise返回到我们的首页index.js里 2，在首页里使用这个promise 实现数据的获取和使用。在具体些就是下面这几步 promise基础用法 [图片] 1、new 一个Promise对象 2、请求数据的异步代码写在promise的函数中 3、promise接受两个参数，一个resolve(已成功success)，一个reject(已失败fail) 4、promise有三种状态pendding(进行中，当new了promise就是pendding的状态)、fulfilled(已成功)、rejected(已失败)，当成功的时候调用resolve将状态改为已成功，当失败的时候调用reject将状态改为已失败，一旦状态发生改变之后，状态就凝固了，后面就无法改变状态了，成功会将成功的数据返回，失败会将失败的信息返回。 5、在需要获取数据的地方通过promise.then()的方式获取，这里面接受两个参数，都是匿名函数，第一个是接受成功的函数，第二个是失败时候的函数 [图片] 好了，到这里我们两种不同页面的异步回调就给大家将完了。代码就完整的给大家贴出来吧，方便大家日后使用 app.js [代码]//app.js App({ //第二种，通过promise promiseGetData() { let promise = new Promise(function(success, fail) { wx.cloud.database().collection("users").get({ success(res) { success(res) }, fail(res) { fail(res) } }) }) return promise; }, //第一种，通过callback的方式来实现回调 callBackGetData(callBack) { wx.cloud.database().collection("users").get({ success(res) { callBack(res) }, fail(res) { callBack(res) } }) }, }) [代码] index.js [代码]// 异步调用，callback const app = getApp() Page({ clickBtn() { //按钮点击 //callback方式 // app.callBackGetData(function(result) { // console.log("dataList", result) // }) //promise方法 let promise = app.promiseGetData() promise.then((res) => { //获取成功的结果，res中存着获取成功时的数据 console.log("成功", res) }, (error) => { // 获取数据失败时 console.log("失败", error) }) }, }) [代码]

2019-11-14

12收藏7评论7593浏览

小程序开发另类小技巧 --用户授权篇

小程序开发另类小技巧 --用户授权篇 getUserInfo较为特殊，不包含在本文范围内，主要针对需要授权的功能性api，例如：wx.startRecord，wx.saveImageToPhotosAlbum， wx.getLocation 原文地址：https://www.yuque.com/jinxuanzheng/gvhmm5/arexcn 仓库地址：https://github.com/jinxuanzheng01/weapp-auth-demo 背景小程序内如果要调用部分接口需要用户进行授权，例如获取地理位置信息，收获地址，录音等等，但是小程序对于这些需要授权的接口并不是特别友好，最明显的有两点：如果用户已拒绝授权，则不会出现弹窗，而是直接进入接口 fail 回调，没有统一的错误信息提示，例如错误码一般情况而言，每次授权时都应该激活弹窗进行提示，是否进行授权，例如： [图片] 而小程序内只有第一次进行授权时才会主动激活弹窗（微信提供的），其他情况下都会直接走fail回调，微信文档也在句末添加了一句请开发者兼容用户拒绝授权的场景, 这种未做兼容的情况下如果用户想要使用录音功能，第一次点击拒绝授权，那么之后无论如何也无法再次开启录音权限**，很明显不符合我们的预期。所以我们需要一个可以进行二次授权的解决方案常见处理方法官方demo 下面这段代码是微信官方提供的授权代码, 可以看到也并没有兼容拒绝过授权的场景查询是否授权（即无法再次调起授权） [代码]// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope wx.getSetting({ success(res) { if (!res.authSetting['scope.record']) { wx.authorize({ scope: 'scope.record', success () { // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问 wx.startRecord() } }) } } }) [代码] 一般处理方式那么正常情况下我们该怎么做呢？以地理位置信息授权为例： [代码]wx.getLocation({ success(res) { console.log('success', res); }, fail(err) { // 检查是否是因为未授权引起的错误 wx.getSetting({ success (res) { // 当未授权时直接调用modal窗进行提示 !res.authSetting['scope.userLocation'] && wx.showModal({ content: '您暂未开启权限，是否开启', confirmColor: '#72bd4a', success: res => { // 用户确认授权后，进入设置列表 if (res.confirm) { wx.openSetting({ success(res){ // 查看设置结果 console.log(!!res.authSetting['scope.userLocation'] ? '设置成功' : '设置失败'); }, }); } } }); } }); } }); [代码] 上面代码，有些同学可能会对在fail回调里直接使用wx.getSetting有些疑问，这里主要是因为微信返回的错误信息没有一个统一code errMsg又在不同平台有不同的表现从埋点数据得出结论，调用这些api接口出错率基本集中在未授权的状态下这里为了方便就直接调用权限检查了，也可以稍微封装一下，方便扩展和复用，变成： [代码] bindGetLocation(e) { let that = this; wx.getLocation({ success(res) { console.log('success', res); }, fail(err) { that.__authorization('scope.userLocation'); } }); }, bindGetAddress(e) { let that = this; wx.chooseAddress({ success(res) { console.log('success', res); }, fail(err) { that.__authorization('scope.address'); } }); }, __authorization(scope) { /** 为了节省行数，不细写了，可以参考上面的fail回调，大致替换了下变量res.authSetting[scope] **/ } [代码] 看上去好像没有什么问题，fail里只引入了一行代码，这里如果只针对较少页面的话我认为已经够用了，毕竟**‘如非必要，勿增实体’，但是对于小打卡这个小程序来说可能涉及到的页面，需要调用的场景偏多**，我并不希望每次都人工去调用这些方法，毕竟人总会犯错梳理目标上文已经提到了背景和常见的处理方法，那么梳理一下我们的目标，我们到底是为了解决什么问题？列了下大致为下面三点：兼容用户拒绝授权的场景，即提供二次授权解决多场景，多页面调用没有统一规范的问题在底层解决，业务层不需要关心二次授权的问题扩展wx[funcName]方法为了节省认知成本和减少出错概率，我希望他是这个api默认携带的功能，也就是说因未授权出现错误时自动调起是否开启授权的弹窗为了实现这个功能，我们可能需要对wx的原生api进行一层包装了（关于页面的包装可以看：如何基于微信原生构建应用级小程序底层架构）为wx.getLocation添加自己的方法这里需要注意的一点是直接使用常见的装饰模式是会出现报错，因为wx这个对象在设置属性时没有设置set方法，这里需要单独处理一下 [代码]// 直接装饰，会报错 Cannot set property getLocation of #<Object> which has only a getter let $getLocation = wx.getLocation; wx.getLocation = function (obj) { $getLocation(obj); }; // 需要做一些小处理 wx = {...wx}; // 对wx对象重新赋值 let $getLocation = wx.getLocation; wx.getLocation = function (obj) { console.log('调用了wx.getLocation'); $getLocation(obj); }; // 再次调用时会在控制台打印出 '调用了wx.getLocation' 字样 wx.getLocation() [代码] 劫持fail方法第一步我们已经控制了wx.getLocation这个api，接下来就是对于fail方法的劫持，因为我们需要在fail里加入我们自己的授权逻辑 [代码]// 方法劫持 wx.getLocation = function (obj) { let originFail = obj.fail; obj.fail = async function (errMsg) { // 0 => 已授权 1 => 拒绝授权 2 => 授权成功 let authState = await authorization('scope.userLocation'); // 已授权报错说明并不是权限问题引起，所以继续抛出错误 // 拒绝授权，走已有逻辑，继续排除错误 authState !== 2 && originFail(errMsg); }; $getLocation(obj); }; // 定义检查授权方法 function authorization(scope) { return new Promise((resolve, reject) => { wx.getSetting({ success (res) { !res.authSetting[scope] ? wx.showModal({ content: '您暂未开启权限，是否开启', confirmColor: '#72bd4a', success: res => { if (res.confirm) { wx.openSetting({ success(res){ !!res.authSetting[scope] ? resolve(2) : resolve(1) }, }); }else { resolve(1); } } }) : resolve(0); } }) }); } // 业务代码中的调用 bindGetLocation(e) { let that = this; wx.getLocation({ type: 'wgs84', success(res) { console.log('success', res); }, fail(err) { console.warn('fail', err); } }); } [代码] 可以看到现在已实现的功能已经达到了我们最开始的预期，即因授权报错作为了wx.getLocation默认携带的功能，我们在业务代码里再也不需要处理任何再次授权的逻辑也意味着wx.getLocation这个api不论在任何页面，组件，出现频次如何，**我们都不需要关心它的授权逻辑（**效果本来想贴gif图的，后面发现有图点大，具体效果去git仓库跑一下demo吧）让我们再优化一波上面所述大致是整个原理的一个思路，但是应用到实际项目中还需要考虑到整体的扩展性和维护成本，那么就让我们再来优化一波代码包结构：本质上只要在app.js这个启动文件内，引用./x-wxx/index文件对原有的wx对象进行覆盖即可 [图片] **简单的代码逻辑： ** [代码]// 大致流程： //app.js wx = require('./x-wxx/index'); // 入口处引入文件 // x-wxx/index const apiExtend = require('./lib/api-extend')； module.exports = (function (wxx) { // 对原有方法进行扩展 wxx = {...wxx}; for (let key in wxx) { !!apiExtend[key] && (()=> { // 缓存原有函数 let originFunc = wxx[key]; // 装饰扩展的函数 wxx[key] = (...args) => apiExtend[key](...args, originFunc); })(); } return wxx; })(wx); // lib/api-extend const Func = require('./Func'); (function (exports) { // 需要扩展的api（类似于config） // 获取权限 exports.authorize = function (opts, done) { // 当调用为"确认授权方法时"直接执行，避免死循环 if (opts.$callee === 'isCheckAuthApiSetting') { console.log('optsopts', opts); done(opts); return; } Func.isCheckAuthApiSetting(opts.scope, () => done(opts)); }; // 选择地址 exports.chooseAddress = function (opts, done) { Func.isCheckAuthApiSetting('scope.address', () => done(opts)); }; // 获取位置信息 exports.getLocation = function (opts, done) { Func.isCheckAuthApiSetting('scope.userLocation', () => done(opts)); }; // 保存到相册 exports.saveImageToPhotosAlbum = function (opts, done) { Func.isCheckAuthApiSetting('scope.writePhotosAlbum', () => done(opts)); } // ...more })(module.exports); [代码] 更多的玩法可以看到我们无论后续扩展任何的微信api，都只需要在lib/api-extend.js 配置即可，这里不仅仅局限于授权，也可以做一些日志，传参的调整，例如： [代码] // 读取本地缓存(同步) exports.getStorageSync = (key, done) => { let storage = null; try { storage = done(key); } catch (e) { wx.$logger.error('getStorageSync', {msg: e.type}); } return storage; }; [代码] 这样是不是很方便呢，至于Func.isCheckAuthApiSetting这个方法具体实现，为了节省文章行数请自行去git仓库里查看吧关于音频授权录音授权略为特殊，以wx.getRecorderManager为例，它并不能直接调起录音授权，所以并不能直接用上述的这种方法，不过我们可以曲线救国，达到类似的效果，还记得我们对于wx.authorize的包装么，本质上我们是可以直接使用它来进行授权的，比如将它用在我们已经封装好的录音管理器的start方法进行校验 [代码]wx.authorize({ scope: 'scope.record' }); [代码] 实际上，为方便统一管理，Func.isCheckAuthApiSetting方法其实都是使用wx.authorize来实现授权的 [代码]exports.isCheckAuthApiSetting = async function(type, cb) { // 简单的类型校验 if(!type && typeof type !== 'string') return; // 声明 let err, result; // 获取本地配置项 [err, result] = await to(getSetting()); // 这里可以做一层缓存，检查缓存的状态，如果已授权可以不必再次走下面的流程，直接return出去即可 if (err) { return cb('fail'); } // 当授权成功时，直接执行 if (result.authSetting[type]) { return cb('success'); } // 调用获取权限 [err, result] = await to(authorize({scope: type, $callee: 'isCheckAuthApiSetting'})); if (!err) { return cb('success'); } } [代码] 关于用户授权用户授权极为特殊，因为微信将wx.getUserInfo升级了一版，没有办法直接唤起了，详见《公告》，所以需要单独处理，关于这里会拆出单独的一篇文章来写一些有趣的玩法总结最后稍微总结下，通过上述的方案，我们解决了最开始目标的同时，也为wx这个对象上的方法提供了统一的装饰接口（lib/api-extend文件），便于后续其他行为的操作比如埋点，日志，参数校验还是那么一句话吧，小程序不管和web开发有多少不同，本质上都是在js环境上进行开发的，希望小程序的社区环境更加活跃，带来更多有趣的东西

2019-06-14

60收藏4评论10181浏览

CSS3 Animation动画的十二原则

作为前端的设计师和工程师，我们用 CSS 去做样式、定位并创建出好看的网站。我们经常用 CSS 去添加页面的运动过渡效果甚至动画，但我们经常做的不过如此。 [代码] 动效是一个有助于访客和用户理解我们设计的强有力工具。这里有些原则能最大限度地应用在我们的工作中。迪士尼经过基础工作练习的长时间累积，在 1981 年出版的 The Illusion of Life: Disney Animation 一书中发表了动画的十二个原则 ([] (https://en.wikipedia.org/wiki/12_basic_principles_of_animation)) 。这些原则描述了动画能怎样用于让观众相信自己沉浸在现实世界中。 [代码] 在本文中，我会逐个介绍这十二个原则，并讨论它们怎样运用在网页中。你能在 Codepen 找到它们[] (https://codepen.io/collection/AxKOdY/)。挤压和拉伸 (Squash and stretch) [图片] 这是物体存在质量且运动时质量保持不变的概念。当一个球在弹跳时，碰击到地面会变扁，恢复的时间会越来越短。 [代码] 创建对象的时候最有用的方法是参照实物，比如人、时钟和弹性球。当它和网页元件一起工作时可能会忽略这个原则。DOM 对象不一定和实物相关，它会按需要在屏幕上缩放。例如，一个按钮会变大并变成一个信息框，或者错误信息会出现和消失。尽管如此，挤压和伸缩效果可以为一个对象增加实物的感觉。甚至一些形状上的小变化就可以创造出细微但抢眼的效果。 HTML [代码] [代码] <h1>Principle 1: Squash and stretch</h1> <h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2> <article class="principle one"> <div class="shape"></div> <div class="surface"></div> </article> [代码] CSS [代码].one .shape { animation: one 4s infinite ease-out; } .one .surface { background: #000; height: 10em; width: 1em; position: absolute; top: calc(50% - 4em); left: calc(50% + 10em); } @keyframes one { 0%, 15% { opacity: 0; } 15%, 25% { transform: none; animation-timing-function: cubic-bezier(1,-1.92,.95,.89); width: 4em; height: 4em; top: calc(50% - 2em); left: calc(50% - 2em); opacity: 1; } 35%, 45% { transform: translateX(8em); height: 6em; width: 2em; top: calc(50% - 3em); animation-timing-function: linear; opacity: 1; } 70%, 100% { transform: translateX(8em) translateY(5em); height: 6em; width: 2em; top: calc(50% - 3em); opacity: 0; } } body { margin: 0; background: #e9b59f; font-family: HelveticaNeue, Arial, Sans-serif; color: #fff; } h1 { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-weight: 300; } h2 { font-size: 0.75em; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } a { text-decoration: none; color: #333; } .principle { width: 100%; height: 100vh; position: relative; } .shape { background: #2d97db; border: 1em solid #fff; width: 4em; height: 4em; position: absolute; top: calc(50% - 2em); left: calc(50% - 2em); } [代码] 预备动作 (Anticipation) [图片] 运动不倾向于突然发生。在现实生活中，无论是一个球在掉到桌子前就开始滚动，或是一个人屈膝准备起跳，运动通常有着某种事先的累积。 [代码] 我们能用它去让我们的过渡动画显得更逼真。预备动作可以是一个细微的反弹，帮人们理解什么对象将在屏幕中发生变化并留下痕迹。例如，悬停在一个元件上时可以在它变大前稍微缩小，在初始列表中添加额外的条目来介绍其它条目的移除方法。 [代码] HTML [代码]<h1>Principle 2: Anticipation</h1> <h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2> <article class="principle two"> <div class="shape"></div> <div class="surface"></div> </article> [代码] CSS [代码].two .shape { animation: two 5s infinite ease-out; transform-origin: 50% 7em; } .two .surface { background: #000; width: 8em; height: 1em; position: absolute; top: calc(50% + 4em); left: calc(50% - 3em); } @keyframes two { 0%, 15% { opacity: 0; transform: none; } 15%, 25% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.5,.05,.91,.47); } 28%, 38% { transform: translateX(-2em); } 40%, 45% { transform: translateX(-4em); } 50%, 52% { transform: translateX(-4em) rotateZ(-20deg); } 70%, 75% { transform: translateX(-4em) rotateZ(-10deg); } 78% { transform: translateX(-4em) rotateZ(-24deg); opacity: 1; } 86%, 100% { transform: translateX(-6em) translateY(4em) rotateZ(-90deg); opacity: 0; } } /* General styling */ body { margin: 0; background: #e9b59f; font-family: HelveticaNeue, Arial, Sans-serif; color: #fff; } h1 { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-weight: 300; } h2 { font-size: 0.75em; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } a { text-decoration: none; color: #333; } .principle { width: 100%; height: 100vh; position: relative; } .shape { background: #2d97db; border: 1em solid #fff; width: 4em; height: 4em; position: absolute; top: calc(50% - 2em); left: calc(50% - 2em); } [代码] 演出布局 (Staging) [图片] 演出布局是确保对象在场景中得以聚焦，让场景中的其它对象和视觉在主动画发生的地方让位。这意味着要么把主动画放到突出的位置，要么模糊其它元件来让用户专注于看他们需要看的东西。 [代码] 在网页方面，一种方法是用 model 覆盖在某些内容上。在现有页面添加一个遮罩并把那些主要关注的内容前置展示。另一种方法是用动作。当很多对象在运动，你很难知道哪些值得关注。如果其它所有的动作停止，只留一个在运动，即使动得很微弱，这都可以让对象更容易被察觉。 [代码] 还有一种方法是做一个晃动和闪烁的按钮来简单地建议用户比如他们可能要保存文档。屏幕保持静态，所以再细微的动作也会突显出来。 HTML [代码]<h1>Principle 3: Staging</h1> <h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2> <article class="principle three"> <div class="shape a"></div> <div class="shape b"></div> <div class="shape c"></div> </article> [代码] CSS [代码].three .shape.a { transform: translateX(-12em); } .three .shape.c { transform: translateX(12em); } .three .shape.b { animation: three 5s infinite ease-out; transform-origin: 0 6em; } .three .shape.a, .three .shape.c { animation: threeb 5s infinite linear; } @keyframes three { 0%, 10% { transform: none; animation-timing-function: cubic-bezier(.57,-0.5,.43,1.53); } 26%, 30% { transform: rotateZ(-40deg); } 32.5% { transform: rotateZ(-38deg); } 35% { transform: rotateZ(-42deg); } 37.5% { transform: rotateZ(-38deg); } 40% { transform: rotateZ(-40deg); } 42.5% { transform: rotateZ(-38deg); } 45% { transform: rotateZ(-42deg); } 47.5% { transform: rotateZ(-38deg); animation-timing-function: cubic-bezier(.57,-0.5,.43,1.53); } 58%, 100% { transform: none; } } @keyframes threeb { 0%, 20% { filter: none; } 40%, 50% { filter: blur(5px); } 65%, 100% { filter: none; } } /* General styling */ body { margin: 0; background: #e9b59f; font-family: HelveticaNeue, Arial, Sans-serif; color: #fff; } h1 { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-weight: 300; } h2 { font-size: 0.75em; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } a { text-decoration: none; color: #333; } .principle { width: 100%; height: 100vh; position: relative; } .shape { background: #2d97db; border: 1em solid #fff; width: 4em; height: 4em; position: absolute; top: calc(50% - 2em); left: calc(50% - 2em); } [代码] 连续运动和姿态对应 (Straight-Ahead Action and Pose-to-Pose) [图片] 连续运动是绘制动画的每一帧，姿态对应是通常由一个 assistant 在定义一系列关键帧后填充间隔。 [代码] 大多数网页动画用的是姿态对应：关键帧之间的过渡可以通过浏览器在每个关键帧之间的插入尽可能多的帧使动画流畅。 [代码] 有一个例外是定时功能step。通过这个功能，浏览器 “steps” 可以把尽可能多的无序帧串清晰。你可以用这种方式绘制一系列图片并让浏览器按顺序显示出来，这开创了一种逐帧动画的风格。 HTML [代码]<h1>Principle 4: Straight Ahead Action and Pose to Pose</h1> <h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2> <article class="principle four"> <div class="shape a"></div> <div class="shape b"></div> </article> [代码] CSS [代码].four .shape.a { left: calc(50% - 8em); animation: four 6s infinite cubic-bezier(.57,-0.5,.43,1.53); } .four .shape.b { left: calc(50% + 8em); animation: four 6s infinite steps(1); } @keyframes four { 0%, 10% { transform: none; } 26%, 30% { transform: rotateZ(-45deg) scale(1.25); } 40% { transform: rotateZ(-45deg) translate(2em, -2em) scale(1.8); } 50%, 75% { transform: rotateZ(-45deg) scale(1.1); } 90%, 100% { transform: none; } } /* General styling */ body { margin: 0; background: #e9b59f; font-family: HelveticaNeue, Arial, Sans-serif; color: #fff; } h1 { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-weight: 300; } h2 { font-size: 0.75em; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } a { text-decoration: none; color: #333; } .principle { width: 100%; height: 100vh; position: relative; } .shape { background: #2d97db; border: 1em solid #fff; width: 4em; height: 4em; position: absolute; top: calc(50% - 2em); left: calc(50% - 2em); } [代码] 跟随和重叠动作 (Follow Through and Overlapping Action) [图片] 事情并不总在同一时间发生。当一辆车从急刹到停下，车子会向前倾、有烟从轮胎冒出来、车里的司机继续向前冲。 [代码] 这些细节是跟随和重叠动作的例子。它们在网页中能被用作帮助强调什么东西被停止，并不会被遗忘。例如一个条目可能在滑动时稍滑微远了些，但它自己会纠正到正确位置。要创造一个重叠动作的感觉，我们可以让元件以稍微不同的速度移动到每处。这是一种在 iOS 系统的视窗 (View) 过渡中被运用得很好的方法。一些按钮和元件以不同速率运动，整体效果会比全部东西以相同速率运动要更逼真，并留出时间让访客去适当理解变化。 [代码] 在网页方面，这可能意味着让过渡或动画的效果以不同速度来运行。 HTML [代码]<h1>Principle 5: Follow Through and Overlapping Action</h1> <h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2> <article class="principle five"> <div class="shape-container"> <div class="shape"></div> </div> </article> [代码] CSS [代码].five .shape { animation: five 4s infinite cubic-bezier(.64,-0.36,.1,1); position: relative; left: auto; top: auto; } .five .shape-container { animation: five-container 4s infinite cubic-bezier(.64,-0.36,.1,2); position: absolute; left: calc(50% - 4em); top: calc(50% - 4em); } @keyframes five { 0%, 15% { opacity: 0; transform: translateX(-12em); } 15%, 25% { transform: translateX(-12em); opacity: 1; } 85%, 90% { transform: translateX(12em); opacity: 1; } 100% { transform: translateX(12em); opacity: 0; } } @keyframes five-container { 0%, 35% { transform: none; } 50%, 60% { transform: skewX(20deg); } 90%, 100% { transform: none; } } /* General styling */ body { margin: 0; background: #e9b59f; font-family: HelveticaNeue, Arial, Sans-serif; color: #fff; } h1 { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-weight: 300; } h2 { font-size: 0.75em; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } a { text-decoration: none; color: #333; } .principle { width: 100%; height: 100vh; position: relative; } .shape { background: #2d97db; border: 1em solid #fff; width: 4em; height: 4em; position: absolute; top: calc(50% - 2em); left: calc(50% - 2em); } [代码] 缓入缓出 (Slow In and Slow Out) [图片] 对象很少从静止状态一下子加速到最大速度，它们往往是逐步加速并在停止前变慢。没有加速和减速，动画感觉就像机器人。 [代码] 在 CSS 方面，缓入缓出很容易被理解，在一个动画过程中计时功能是一种描述变化速率的方式。 [代码] 使用计时功能，动画可以由慢加速 (ease-in)、由快减速 (ease-out)，或者用贝塞尔曲线做出更复杂的效果。 HTML [代码]<h1>Principle 6: Slow in and Slow out</h1> <h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2> <article class="principle six"> <div class="shape a"></div> </article> [代码] CSS [代码].six .shape { animation: six 3s infinite cubic-bezier(0.5,0,0.5,1); } @keyframes six { 0%, 5% { transform: translate(-12em); } 45%, 55% { transform: translate(12em); } 95%, 100% { transform: translate(-12em); } } /* General styling */ body { margin: 0; background: #e9b59f; font-family: HelveticaNeue, Arial, Sans-serif; color: #fff; } h1 { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-weight: 300; } h2 { font-size: 0.75em; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } a { text-decoration: none; color: #333; } .principle { width: 100%; height: 100vh; position: relative; } .shape { background: #2d97db; border: 1em solid #fff; width: 4em; height: 4em; position: absolute; top: calc(50% - 2em); left: calc(50% - 2em); } [代码] 弧线运动 (Arc) [图片] 虽然对象是更逼真了，当它们遵循「缓入缓出」的时候它们很少沿直线运动——它们倾向于沿弧线运动。我们有几种 CSS 的方式来实现弧线运动。一种是结合多个动画，比如在弹力球动画里，可以让球上下移动的同时让它右移，这时候球的显示效果就是沿弧线运动。 HTML [代码]<h1>Principle 7: Arc (1)</h1> <h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2> <article class="principle sevena"> <div class="shape-container"> <div class="shape a"></div> </div> </article> [代码] CSS [代码].sevena .shape-container { animation: move-right 6s infinite cubic-bezier(.37,.55,.49,.67); position: absolute; left: calc(50% - 4em); top: calc(50% - 4em); } .sevena .shape { animation: bounce 6s infinite linear; border-radius: 50%; position: relative; left: auto; top: auto; } @keyframes move-right { 0% { transform: translateX(-20em); opacity: 1; } 80% { opacity: 1; } 90%, 100% { transform: translateX(20em); opacity: 0; } } @keyframes bounce { 0% { transform: translateY(-8em); animation-timing-function: cubic-bezier(.51,.01,.79,.02); } 15% { transform: translateY(8em); animation-timing-function: cubic-bezier(.19,1,.7,1); } 25% { transform: translateY(-4em); animation-timing-function: cubic-bezier(.51,.01,.79,.02); } 32.5% { transform: translateY(8em); animation-timing-function: cubic-bezier(.19,1,.7,1); } 40% { transform: translateY(0em); animation-timing-function: cubic-bezier(.51,.01,.79,.02); } 45% { transform: translateY(8em); animation-timing-function: cubic-bezier(.19,1,.7,1); } 50% { transform: translateY(3em); animation-timing-function: cubic-bezier(.51,.01,.79,.02); } 56% { transform: translateY(8em); animation-timing-function: cubic-bezier(.19,1,.7,1); } 60% { transform: translateY(6em); animation-timing-function: cubic-bezier(.51,.01,.79,.02); } 64% { transform: translateY(8em); animation-timing-function: cubic-bezier(.19,1,.7,1); } 66% { transform: translateY(7.5em); animation-timing-function: cubic-bezier(.51,.01,.79,.02); } 70%, 100% { transform: translateY(8em); animation-timing-function: cubic-bezier(.19,1,.7,1); } } /* General styling */ body { margin: 0; background: #e9b59f; font-family: HelveticaNeue, Arial, Sans-serif; color: #fff; } h1 { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-weight: 300; } h2 { font-size: 0.75em; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } a { text-decoration: none; color: #333; } .principle { width: 100%; height: 100vh; position: relative; } .shape { background: #2d97db; border: 1em solid #fff; width: 4em; height: 4em; position: absolute; top: calc(50% - 2em); left: calc(50% - 2em); } [代码] [图片] 另外一种是旋转元件，我们可以设置一个在对象之外的原点来作为它的旋转中心。当我们旋转这个对象，它看上去就是沿着弧线运动。 HTML [代码]<h1>Principle 7: Arc (2)</h1> <h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2> <article class="principle sevenb"> <div class="shape a"></div> <div class="shape b"></div> </article> [代码] CSS [代码].sevenb .shape.a { animation: sevenb 3s infinite linear; top: calc(50% - 2em); left: calc(50% - 9em); transform-origin: 10em 50%; } .sevenb .shape.b { animation: sevenb 6s infinite linear reverse; background-color: yellow; width: 2em; height: 2em; left: calc(50% - 1em); top: calc(50% - 1em); } @keyframes sevenb { 100% { transform: rotateZ(360deg); } } /* General styling */ body { margin: 0; background: #e9b59f; font-family: HelveticaNeue, Arial, Sans-serif; color: #fff; } h1 { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-weight: 300; } h2 { font-size: 0.75em; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } a { text-decoration: none; color: #333; } .principle { width: 100%; height: 100vh; position: relative; } .shape { background: #2d97db; border: 1em solid #fff; width: 4em; height: 4em; position: absolute; top: calc(50% - 2em); left: calc(50% - 2em); } [代码] 次要动作 (Secondary Action) [图片] 虽然主动画正在发生，次要动作可以增强它的效果。这就好比某人在走路的时候摆动手臂和倾斜脑袋，或者弹性球弹起的时候扬起一些灰尘。在网页方面，当主要焦点出现的时候就可以开始执行次要动作，比如拖拽一个条目到列表中间。 HTML [代码]<h1>Principle 8: Secondary Action</h1> <h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2> <article class="principle eight"> <div class="shape a"></div> <div class="shape b"></div> <div class="shape c"></div> </article> [代码] CSS [代码].eight .shape.a { transform: translateX(-6em); animation: eight-shape-a 4s cubic-bezier(.57,-0.5,.43,1.53) infinite; } .eight .shape.b { top: calc(50% + 6em); opacity: 0; animation: eight-shape-b 4s linear infinite; } .eight .shape.c { transform: translateX(6em); animation: eight-shape-c 4s cubic-bezier(.57,-0.5,.43,1.53) infinite; } @keyframes eight-shape-a { 0%, 50% { transform: translateX(-5.5em); } 70%, 100% { transform: translateX(-10em); } } @keyframes eight-shape-b { 0% { transform: none; } 20%, 30% { transform: translateY(-1.5em); opacity: 1; animation-timing-function: cubic-bezier(.57,-0.5,.43,1.53); } 32% { transform: translateY(-1.25em); opacity: 1; } 34% { transform: translateY(-1.75em); opacity: 1; } 36%, 38% { transform: translateY(-1.25em); opacity: 1; } 42%, 60% { transform: translateY(-1.5em); opacity: 1; } 75%, 100% { transform: translateY(-8em); opacity: 1; } } @keyframes eight-shape-c { 0%, 50% { transform: translateX(5.5em); } 70%, 100% { transform: translateX(10em); } } /* General styling */ body { margin: 0; background: #e9b59f; font-family: HelveticaNeue, Arial, Sans-serif; color: #fff; } h1 { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-weight: 300; } h2 { font-size: 0.75em; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } a { text-decoration: none; color: #333; } .principle { width: 100%; height: 100vh; position: relative; } .shape { background: #2d97db; border: 1em solid #fff; width: 4em; height: 4em; position: absolute; top: calc(50% - 2em); left: calc(50% - 2em); } [代码] 时间节奏 (Timing) [图片] 动画的时间节奏是需要多久去完成，它可以被用来让看起来很重的对象做很重的动画，或者用在添加字符的动画中。 [代码] 这在网页上可能只要简单调整 animation-duration 或 transition-duration 值。 [代码] 这很容易让动画消耗更多时间，但调整时间节奏可以帮动画的内容和交互方式变得更出众。 HTML [代码]<h1>Principle 9: Timing</h1> <h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2> <article class="principle nine"> <div class="shape a"></div> <div class="shape b"></div> </article> [代码] CSS [代码].nine .shape.a { animation: nine 4s infinite cubic-bezier(.93,0,.67,1.21); left: calc(50% - 12em); transform-origin: 100% 6em; } .nine .shape.b { animation: nine 2s infinite cubic-bezier(1,-0.97,.23,1.84); left: calc(50% + 2em); transform-origin: 100% 100%; } @keyframes nine { 0%, 10% { transform: translateX(0); } 40%, 60% { transform: rotateZ(90deg); } 90%, 100% { transform: translateX(0); } } /* General styling */ body { margin: 0; background: #e9b59f; font-family: HelveticaNeue, Arial, Sans-serif; color: #fff; } h1 { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-weight: 300; } h2 { font-size: 0.75em; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } a { text-decoration: none; color: #333; } .principle { width: 100%; height: 100vh; position: relative; } .shape { background: #2d97db; border: 1em solid #fff; width: 4em; height: 4em; position: absolute; top: calc(50% - 2em); left: calc(50% - 2em); } [代码] 夸张手法 (Exaggeration) [图片] 夸张手法在漫画中是最常用来为某些动作刻画吸引力和增加戏剧性的，比如一只狼试图把自己的喉咙张得更开地去咬东西可能会表现出更恐怖或者幽默的效果。在网页中，对象可以通过上下滑动去强调和刻画吸引力，比如在填充表单的时候生动部分会比收缩和变淡的部分更突出。 HTML [代码]<h1>Principle 10: Exaggeration</h1> <h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2> <article class="principle ten"> <div class="shape"></div> </article> [代码] CSS [代码].ten .shape { animation: ten 4s infinite linear; transform-origin: 50% 8em; top: calc(50% - 6em); } @keyframes ten { 0%, 10% { transform: none; animation-timing-function: cubic-bezier(.87,-1.05,.66,1.31); } 40% { transform: rotateZ(-45deg) scale(2); animation-timing-function: cubic-bezier(.16,.54,0,1.38); } 70%, 100% { transform: rotateZ(360deg) scale(1); } } /* General styling */ body { margin: 0; background: #e9b59f; font-family: HelveticaNeue, Arial, Sans-serif; color: #fff; } h1 { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-weight: 300; } h2 { font-size: 0.75em; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } a { text-decoration: none; color: #333; } .principle { width: 100%; height: 100vh; position: relative; } .shape { background: #2d97db; border: 1em solid #fff; width: 4em; height: 4em; position: absolute; top: calc(50% - 2em); left: calc(50% - 2em); } [代码] 扎实的描绘 (Solid drawing) [图片] 当动画对象在三维中应该加倍注意确保它们遵循透视原则。因为人们习惯了生活在三维世界里，如果对象表现得与实际不符，会让它看起来很糟糕。如今浏览器对三维变换的支持已经不错，这意味着我们可以在场景里旋转和放置三维对象，浏览器能自动控制它们的转换。 HTML [代码]<h1>Principle 11: Solid drawing</h1> <h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2> <article class="principle eleven"> <div class="shape"> <div class="container"> <span class="front"></span> <span class="back"></span> <span class="left"></span> <span class="right"></span> <span class="top"></span> <span class="bottom"></span> </div> </div> </article> [代码] CSS [代码].eleven .shape { background: none; border: none; perspective: 400px; perspective-origin: center; } .eleven .shape .container { animation: eleven 4s infinite cubic-bezier(.6,-0.44,.37,1.44); transform-style: preserve-3d; } .eleven .shape span { display: block; position: absolute; opacity: 1; width: 4em; height: 4em; border: 1em solid #fff; background: #2d97db; } .eleven .shape span.front { transform: translateZ(3em); } .eleven .shape span.back { transform: translateZ(-3em); } .eleven .shape span.left { transform: rotateY(-90deg) translateZ(-3em); } .eleven .shape span.right { transform: rotateY(-90deg) translateZ(3em); } .eleven .shape span.top { transform: rotateX(-90deg) translateZ(-3em); } .eleven .shape span.bottom { transform: rotateX(-90deg) translateZ(3em); } @keyframes eleven { 0% { opacity: 0; } 10%, 40% { transform: none; opacity: 1; } 60%, 75% { transform: rotateX(-20deg) rotateY(-45deg) translateY(4em); animation-timing-function: cubic-bezier(1,-0.05,.43,-0.16); opacity: 1; } 100% { transform: translateZ(-180em) translateX(20em); opacity: 0; } } /* General styling */ body { margin: 0; background: #e9b59f; font-family: HelveticaNeue, Arial, Sans-serif; color: #fff; } h1 { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-weight: 300; } h2 { font-size: 0.75em; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } a { text-decoration: none; color: #333; } .principle { width: 100%; height: 100vh; position: relative; } .shape { background: #2d97db; border: 1em solid #fff; width: 4em; height: 4em; position: absolute; top: calc(50% - 2em); left: calc(50% - 2em); } [代码] 吸引力 (Appeal) [图片] 吸引力是艺术作品的特质，让我们与艺术家的想法连接起来。就像一个演员身上的魅力，是注重细节和动作相结合而打造吸引性的结果。 [代码] 精心制作网页上的动画可以打造出吸引力，例如 Stripe 这样的公司用了大量的动画去增加它们结账流程的可靠性。 [代码] HTML [代码]<h1>Principle 12: Appeal</h1> <h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2> <article class="principle twelve"> <div class="shape"> <div class="container"> <span class="item one"></span> <span class="item two"></span> <span class="item three"></span> <span class="item four"></span> </div> </div> </article> [代码] CSS [代码].twelve .shape { background: none; border: none; perspective: 400px; perspective-origin: center; } .twelve .shape .container { animation: show-container 8s infinite cubic-bezier(.6,-0.44,.37,1.44); transform-style: preserve-3d; width: 4em; height: 4em; border: 1em solid #fff; background: #2d97db; position: relative; } .twelve .item { background-color: #1f7bb6; position: absolute; } .twelve .item.one { animation: show-text 8s 0.1s infinite ease-out; height: 6%; width: 30%; top: 15%; left: 25%; } .twelve .item.two { animation: show-text 8s 0.2s infinite ease-out; height: 6%; width: 20%; top: 30%; left: 25%; } .twelve .item.three { animation: show-text 8s 0.3s infinite ease-out; height: 6%; width: 50%; top: 45%; left: 25%; } .twelve .item.four { animation: show-button 8s infinite cubic-bezier(.64,-0.36,.1,1.43); height: 20%; width: 40%; top: 65%; left: 30%; } @keyframes show-container { 0% { opacity: 0; transform: rotateX(-90deg); } 10% { opacity: 1; transform: none; width: 4em; height: 4em; } 15%, 90% { width: 12em; height: 12em; transform: translate(-4em, -4em); opacity: 1; } 100% { opacity: 0; transform: rotateX(-90deg); width: 4em; height: 4em; } } @keyframes show-text { 0%, 15% { transform: translateY(1em); opacity: 0; } 20%, 85% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: translateY(-1em); animation-timing-function: cubic-bezier(.64,-0.36,.1,1.43); } } @keyframes show-button { 0%, 25% { transform: scale(0); opacity: 0; } 35%, 80% { transform: none; opacity: 1; } 90%, 100% { opacity: 0; transform: scale(0); } } /* General styling */ body { margin: 0; background: #e9b59f; font-family: HelveticaNeue, Arial, Sans-serif; color: #fff; } h1 { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-weight: 300; } h2 { font-size: 0.75em; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } a { text-decoration: none; color: #333; } .principle { width: 100%; height: 100vh; position: relative; } .shape { background: #2d97db; border: 1em solid #fff; width: 4em; height: 4em; position: absolute; top: calc(50% - 2em); left: calc(50% - 2em); } [代码]

2019-03-21

74收藏9评论10950浏览

云开发私人实时聊天室

云开发私人实时聊天室说明在最开始开发小程序时，本人和团队成员实现小程序的聊天室时遇到一些困难，查阅了一些资料，有些讲得太泛，有些讲的太难，在一个阶段克服了这个困难后，收获了很多，对整个流程也熟悉了很多，在这里记录自己的一个思路，希望也能对开发新手有帮助。项目基本配置 1.项目创建及云开发配置：官方文档：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/quick-start/miniprogram.html PS：注意云函数目录是否为此样式：[图片] 若是普通目录样式记得在project.config.json中配置加入： [图片] 2.添加包colorui，用于样式使用，并在app.wxss中导入改包 [图片][图片] 3.在pages下新建文件夹index和新建page：index [图片] 聊天室静态页面最终呈现的效果：自己： [图片] 对方： [图片] 1. wxml 整体结构： [图片] 整一个页面说白了就是由一个scroll-view和一个回复框组成，scroll-view中由消息数组构成，消息的内容可以自己定义（时间，头像，消息内容等等）具体源码：  <scroll-view id='page' scroll-into-view="{{toView}}" upper-threshold="100" scroll-y="true" enable-back-to-top="true" class="message-list">  <view class="cu-chat" wx:for="{{3}}" wx:key="index" id="row_{{index}}">  <block wx:if="{{false}}"> <block wx:if="{{true}}"> <view class="datetime" style="width:100%">2021-11-16 18:10</view> </block> <view class="cu-item self" style="width: 750rpx; height: 120rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx"> <view class="main"> <view class="content bg-green shadow" style="position: relative; left: 0rpx; top: 22rpx;border-radius: 10rpx"> <text style="font-size:33rpx">这是一条消息</text> </view> </view> <view class="cu-avatar radius center" style="background-image: url({{useravatar}}); width: 71rpx; height: 71rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx" bindtap="go_myinfo"></view> </view> </block>  <block wx:else> <block wx:if="{{true}}"> <view class="datetime" style="width:100%">2021-11-16 19:10</view> </block> <view class="cu-item" style="width: 750rpx; height: 120rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx"> <view class="cu-avatar radius center" style="background-image: url({{match_avatar}}); width: 71rpx; height: 71rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx"> </view> <view class="main"> <view class="content bg-white shadow" style="position: relative; left: 0rpx; top: 22rpx;border-radius: 10rpx"> <text style="font-size:33rpx">这是对面的一条消息</text> </view> </view> </view> </block> </view> </scroll-view>  <view class="reply cu-bar">  <view class="opration-area"> <input type="text" bindinput="getContent" value="{{textInputValue}}" maxlength="300" cursor-spacing="10" style="width: 544rpx; height: 64rpx; display: block; box-sizing: border-box;"></input> </view>  <button class="cu-btn bg-green shadow" bindtap='sendMsg' style="width: 150rpx; height: 64rpx; display: flex; box-sizing: border-box; left: -22rpx; top: 0rpx; position: relative">发送</button> </view> 2. wxss一些样式的配置，具体就不详细叙述了，见源码： /*消息窗口*/ .message-list { margin-bottom: 54px; } /*文本输入或语音录入*/ .reply .opration-area { flex: 1; padding: 8px; } /*回复文本框*/ .reply input { background: rgb(252, 252, 252); height: 36px; border: 1px solid rgb(221, 221, 221); border-radius: 6px; padding-left: 3px; } /*回复框*/ .reply { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; position: fixed; bottom: 0; width: 100%; height: 108rpx; border-top: 1px solid rgb(215, 215, 215); background: rgb(245, 245, 245); } /*日期*/ .datetime { font-size: 10px; padding: 10px 0; color: #999; text-align: center; } 到此，静态的页面就已经做好啦，现在主要的难题也是数据部分，下面将先讲述数据库chatroom的设计及解释，最后进行js的代码编写。数据库创建及设计1.数据库表创建：在编辑器打开云开发控制台，点击数据库，再点击集合名称右边加号，创建一个集合名称为chatroom的表。 [图片][图片] [图片] [图片] 2.chatroom设计具体页面如图： [图片] 其中， _id为记录创建时自动创建的标识属性，即主键 _openid和match_openid代表了自身和对方 records为一个对象数组，每个对象的属性分别是： msgText：消息属性（此案例中只有text属性，即文本，可自扩展为图片、音频等） openid：发送人的标识 sendTime：消息创建时间 sendTimeTS：消息创建时的时间戳（用于做时间比较，判断时间显示） showTime：消息是否显示时间 textContent：具体文本内容其中， records：array类型， records中的记录：object类型 records中的sendTimeTS：number类型 records中的showTime：boolean类型其余全为string类型 PS： 1、openid和match_openid可标识一个聊天室，是唯一不变的； 2、用户本身的openid是有可能在记录中的match_openid位置上的，谁发起了这个聊天室，openid这个位置就是那个发起用户的openid，所以在开发中，想要获取自己和所有其他人的聊天室，要查每条记录中的openid或者match_openid与自身openid是否匹配。 3.权限设置因为该表中的记录，非记录创建者也可以进行读写，这里的权限记得设置，不然会出问题： [图片] [图片] [图片] 具体功能实现（JS写法）1.先配置Page.data：6个属性，如有需要可自行扩展 [图片] chats存储数据库表中的records的所有信息； textInputValue是输入框内容。 2.绑定数据库表onChange函数： [图片] [图片] 这里的onChange输出e是这样的： [图片] type=init，获取了数据库表中该记录的所有内容，在这里将js中的chats进行赋值即可；另外，当该记录内容变化时，type是update类型 3.wxml修改，wx-for将chats显示，以及一些判断和内容显示的设置： [图片] 到此，显示效果就有啦 [图片] 接下来，就是信息的添加了，下面将显示如何添加新信息到数据库 4.发送信息先获取输入框内容： [图片] [图片] 发送函数：增加一条信息，就是在records数组中加一条记录，所以在函数内部要对新纪录的属性进行一些赋值和判断等。对showTime的处理： [图片] 消息空白处理： [图片] 对消息内的所有属性进行一个打包处理： [图片] 存储记录，并滑动页面： [图片] 最后，清空消息框内容 [图片] 发送一条消息，最终效果如图： [图片][图片] js源码const app = getApp() const db = wx.cloud.database() const _ = db.command const chatroomCollection = db.collection("chatroom") var util = require('../../utils/util.js'); Page({ data: { //这里的openid和match_openid应该是在上一级页面传进来的属性，这里由于只有聊天室所以暂时设置为一些固定值，用于测试 openid:'', match_openid:'', //这里的avatar是头像，具体传参方式自己设定，这里暂时设置为固定值，用于测试 useravatar:'', match_avatar:'', chats:[], textInputValue:'' }, onReady() { var that = this //查询openid和match_openid所标识的唯一聊天室 chatroomCollection.where({ _openid: _.or(_.eq(that.data.openid), _.eq(that.data.match_openid)), match_openid: _.or(_.eq(that.data.openid), _.eq(that.data.match_openid)) }) //绑定onChange，直观而言即表中该记录发生变动时，调用该函数 .watch({ onChange: this.onChange.bind(this), onError(err) { console.log(err) } }) }, //数据库表onchange绑定函数 onChange(e) { let that = this //type="init"的情况：初始化聊天窗口信息 if (e.type == "init") { that.initchats(e.docs[0].records) } //type="update"的情况：records中增加了一条记录 else { //在chats数组中增加该新消息 let i = that.data.chats.length const new_chats = [...that.data.chats] if (e.docs.length) new_chats.push(e.docs[0].records[i]) this.setData({ chats: new_chats }) } }, initchats(records) { this.setData({ chats: records }) //跳转到页面底部 this.goBottom() }, //获取输入文本 getContent(e) { this.data.textInputValue = e.detail.value }, sendMsg(){ let that = this //show代表了数据库表中的showTime属性，是否显示消息时间 var show = false //无记录时，true if (this.data.chats.length == 0) show = true //判断上下两条消息的时间差决定是否显示时间，这里设置了2分钟：120000毫秒，可自行修改 else { if (Date.now() - this.data.chats[this.data.chats.length - 1].sendTimeTS > 120000) show = true } const _ = db.command //消息空白处理 if (!that.data.textInputValue) { wx.showToast({ title: '不能发送空白信息', icon: 'none', }) return } //消息内容赋值 const doc = { openid: that.data.openid, msgText: "text", textContent: that.data.textInputValue, sendTime: util.formatTime(new Date()), sendTimeTS: Date.now(), showTime: show, } //添加数据库表中该记录的records数组，并跳转页面到底部 chatroomCollection.where({ _openid: _.or(_.eq(that.data.openid), _.eq(that.data.match_openid)), match_openid: _.or(_.eq(that.data.openid), _.eq(that.data.match_openid)) }) .update({ data: { records: _.push(doc) } }) .then(res => { that.goBottom() }) //消息设空 that.setData({ textInputValue: "" }) }, goBottom() { wx.createSelectorQuery().select('#page').boundingClientRect(function (rect) { if (rect) { // 使页面滚动到底部 wx.pageScrollTo({ scrollTop: rect.height + 4 }) } }).exec() }, }) 其中，util.js内容如下： const formatTime = date => { const year = date.getFullYear() const month = date.getMonth() + 1 const day = date.getDate() const hour = date.getHours() const minute = date.getMinutes() const second = date.getSeconds() return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}` } const formatNumber = n => { n = n.toString() return n[1] ? n : `0${n}` } module.exports = { formatTime } 一个简单的demo就完成了，大家有什么问题欢迎随时q我。 -----------完结撒花----------

2021-11-18

12收藏10评论6747浏览

vue的基础知识点总结

vue的基础知识点总结小程序的前端框架可以选用uniapp，是一款集成了vue的小程序前端开发框架，同时一套代码可以适配h5，安卓和小程序。对vue感兴趣的同学可以上手玩玩 vue的基础指令基本模板(不使用脚手架) [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02-Vue基本模板</title>  <script src="js/vue.js"></script> </head> <body> <div id="app"> <p>{{ name }}</p> </div> <script> // 2.创建一个Vue的实例对象 let vue = new Vue({ // 3.告诉Vue的实例对象, 将来需要控制界面上的哪个区域 el: '#app', // 4.告诉Vue的实例对象, 被控制区域的数据是什么 data: { name: "李南江" } }); </script> </body> </html>  [代码] vue数据的单项绑定 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>03-Vue数据单向传递</title>  <script src="js/vue.js"></script> </head> <body>   <div id="app"> <p>{{ name }}</p> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { name: "李南江" } }); </script> </body> </html> [代码] v-model数据的双向传递 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>04-Vue数据双向传递</title> <script src="js/vue.js"></script> </head> <body>    <div id="app"> <p>{{ name }}</p> <input type="text" v-model="msg"> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { name: "李南江", msg: "知播渔" } }); </script> </body> </html> [代码] v-once只渲染一次 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>05-常用指令-v-once</title> <script src="js/vue.js"></script> </head> <body>   <div id="app"> <p v-once>原始数据: {{ name }}</p> <p>当前数据: {{ name }}</p> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { name: "李南江", } }); </script> </body> </html> [代码] v-cloak数据渲染完之后才显示 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>06-常用指令-v-cloak</title> <style> [v-cloak] { display: none } </style> </head> <body>   <div id="app"> <p v-cloak>{{ name }}</p> </div>  <script src="js/vue.js"></script> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { name: "李南江", } }); </script> </body> </html> [代码] v-text和v-html [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>07-常用指令v-text和v-html</title> <script src="js/vue.js"></script> </head> <body>   <div id="app">          <p v-html="name">++++++++</p>  <p v-html="msg">++++++++</p> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { name: "李南江", msg: "<span>我是span</span>" } }); </script> </body> </html> [代码] v-if [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>08-常用指令v-if</title> <script src="js/vue.js"></script> </head> <body>     <div id="app">          <p v-if="score >= 80">优秀</p> <p v-else-if="score >= 60">良好</p> <p v-else>差</p> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { show: true, hidden: false, age: 17, score: 50 } }); </script> </body> </html> [代码] v-show [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>09-常用指令v-show</title> <script src="js/vue.js"></script> </head> <body>   <div id="app">       <p v-show="show">我是段落1</p> <p v-show="hidden">我是段落2</p> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { show: true, hidden: false, age: 18 } }); </script> </body> </html> [代码] v-for [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>10-常用指令v-for</title> <script src="js/vue.js"></script> </head> <body>   <div id="app"> <ul>     </ul> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: "#app", // 这里就是MVVM中的Model data: { list: ["张三", "李四", "王五", "赵六"], obj: { name: "lnj", age: 33, gender: "man", class: "知播渔", }, }, }); </script> </body> </html> [代码] v-bind(语法糖: 😃 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>10-常用指令v-bind</title> <script src="js/vue.js"></script> </head> <body>   <div id="app">          <input type="text" :value="age + 1" /> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: "#app", // 这里就是MVVM中的Model data: { name: "知播渔666", age: 18, }, }); </script> </body> </html> [代码] 绑定类名:class [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>12-常用指令-绑定类名</title> <script src="js/vue.js"></script> <style> *{ margin: 0; padding: 0; } .size{ font-size: 100px; } .color{ color: red; } .active{ background: skyblue; } </style> </head> <body>   <div id="app">             <p :class="obj">我是段落</p> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { flag: false, obj:{ 'size': false, 'color': false, 'active': true, } } }); </script> </body> </html> [代码] 绑定样式:style [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>13-常用指令-绑定样式</title> <script src="js/vue.js"></script> </head> <body>   <div id="app">          <p :style="[obj1, obj2]">我是段落</p> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { obj1:{ "color": "blue", "font-size": "100px" }, obj2: { "background-color": "red" } } }); </script> </body> </html> [代码] v-on(语法糖: @) [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>14-常用指令-v-on</title> <script src="js/vue.js"></script> </head> <body>   <div id="app">      <button @click="myFn">我是按钮</button> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { }, methods: { myFn(){ alert('lnj') } } }); </script> </body> </html> [代码] v-on的修饰符 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>15-常用指令-v-on修饰符</title> <script src="js/vue.js"></script> <style> * { margin: 0; padding: 0; } .a { width: 300px; height: 300px; background: red; } .b { width: 200px; height: 200px; background: blue; } .c { width: 100px; height: 100px; background: green; } </style> </head> <body>   <div id="app">             </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: "#app", // 这里就是MVVM中的Model data: {}, // 专门用于存储监听事件回调函数 methods: { myFn() { alert("lnj"); }, myFn1() { console.log("爷爷"); }, myFn2() { console.log("爸爸"); }, myFn3() { console.log("儿子"); }, }, }); </script> </body> </html> [代码] v-on的注意点 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>16-常用指令-v-on注意点</title> <script src="js/vue.js"></script> </head> <body>   <div id="app"> <button @click="myFn('lnj', 33, $event)">我是按钮</button> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { gender: "man" }, // 专门用于存储监听事件回调函数 methods: { myFn(name, age, e){ // alert('lnj'); // console.log(name, age, e); console.log(this.gender); } } }); </script> </body> </html> [代码] v-on按键修饰符 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>17-常用指令-v-on按键修饰符</title> <script src="js/vue.js"></script> </head> <body>   <div id="app">  <input type="text" @keyup.f2="myFn"> </div> <script> Vue.config.keyCodes.f2 = 113; // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { }, // 专门用于存储监听事件回调函数 methods: { myFn(){ alert("lnj"); } } }); </script> </body> </html> [代码] vue自定义全局指令 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>18-常用指令-自定义指令</title> <script src="js/vue.js"></script> </head> <body>   <div id="app">  <input type="text" v-focus /> </div> <script> /* directive方法接收两个参数第一个参数: 指令的名称第二个参数: 对象注意点: 在自定义指令的时候, 在指定指令名称的时候, 不需要写v- 注意点: 指令可以在不同的生命周期阶段执行 bind: 指令被绑定到元素上的时候执行 inserted: 绑定指令的元素被添加到父元素上的时候执行 * */ Vue.directive("color", { // 这里的el就是被绑定指令的那个元素 bind: function (el) { el.style.color = "red"; }, }); Vue.directive("focus", { // 这里的el就是被绑定指令的那个元素 inserted: function (el) { el.focus(); }, }); // 这里就是MVVM中的View Model let vue = new Vue({ el: "#app", // 这里就是MVVM中的Model data: {}, // 专门用于存储监听事件回调函数 methods: {}, }); </script> </body> </html> [代码] 自定义指令传参 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>19-常用指令-自定义指令参数</title> <script src="js/vue.js"></script> </head> <body>   <div id="app">  <p v-color="curColor">我是段落</p> </div> <script> Vue.directive("color", { // 这里的el就是被绑定指令的那个元素 bind: function (el, obj) { // el.style.color = "red"; el.style.color = obj.value; } }); // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { curColor: 'green' }, // 专门用于存储监听事件回调函数 methods: { } }); </script> </body> </html> [代码] directives自定义局部指令 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>21-常用指令-自定义局部指令</title> <script src="js/vue.js"></script> </head> <body>   <div id="app1"> <p v-color="'blue'">我是段落</p> </div> <div id="app2"> <p v-color="'red'">我是段落</p> </div> <script> /* Vue.directive("color", { // 这里的el就是被绑定指令的那个元素 bind: function (el, obj) { el.style.color = obj.value; } }); */ // 这里就是MVVM中的View Model let vue1 = new Vue({ el: '#app1', // 这里就是MVVM中的Model data: {}, // 专门用于存储监听事件回调函数 methods: {} }); // 这里就是MVVM中的View Model let vue2 = new Vue({ el: '#app2', // 这里就是MVVM中的Model data: {}, // 专门用于存储监听事件回调函数 methods: {}, // 专门用于定义局部指令的 directives: { "color": { // 这里的el就是被绑定指令的那个元素 bind: function (el, obj) { el.style.color = obj.value; } } } }); </script> </body> </html> [代码] computed计算属性 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>22-Vue-计算属性</title> <script src="js/vue.js"></script> </head> <body>   <div id="app"> <p>{{name}}</p> <p>{{age + 1}}</p> <p>{{msg.split("").reverse().join("")}}</p>  <p>{{msg2}}</p> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { name: "lnj", age: 18, msg: "abcdef" }, // 专门用于存储监听事件回调函数 methods: {}, // 专门用于定义计算属性的 computed: { msg2: function () { let res = "abcdef".split("").reverse().join(""); return res; } } }); </script> </body> </html> [代码] 计算属性和函数的区别 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>23-Vue-计算属性和函数</title> <script src="js/vue.js"></script> </head> <body>   <div id="app">  <p>{{msg2}}</p> <p>{{msg2}}</p> <p>{{msg2}}</p> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { }, // 专门用于存储监听事件回调函数 methods: { /* 函数的特点: 每次调用都会执行 * */ msg1(){ console.log("msg1函数被执行了"); let res = "abcdef".split("").reverse().join(""); return res; } }, // 专门用于定义计算属性的 computed: { /* 计算属性的特点: 只要返回的结果没有发生变化, 那么计算属性就只会被执行一次计算属性的应用场景: 由于计算属性会将返回的结果缓存起来所以如果返回的数据不经常发生变化, 那么使用计算属性的性能会比使用函数的性能高 * */ msg2: function () { console.log("msg2计算属性被执行了"); let res = "abcdef".split("").reverse().join(""); return res; } } }); </script> </body> </html> [代码] 自定义全局的过滤器 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>24-Vue-自定义全局过滤器</title> <script src="js/vue.js"></script> </head> <body>   <div id="app">  <p>{{name | formartStr1 | formartStr2}}</p> </div> <script> /* 如何自定义一个全局过滤器通过Vue.filter(); filter方法接收两个参数第一个参数: 过滤器名称第二个参数: 处理数据的函数注意点: 默认情况下处理数据的函数接收一个参数, 就是当前要被处理的数据 * */ Vue.filter("formartStr1", function (value) { // console.log(value); value = value.replace(/学院/g, "大学"); console.log(value); return value; }); Vue.filter("formartStr2", function (value) { // console.log(value); value = value.replace(/大学/g, "幼儿园"); console.log(value); return value; }); // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { name: "知播渔学院, 指趣学院, 前端学院, 区块链学院" }, // 专门用于存储监听事件回调函数 methods: { }, // 专门用于定义计算属性的 computed: { } }); </script> </body> </html> [代码] filters自定义局部过滤器 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>24-Vue-自定义全局过滤器</title> <script src="js/vue.js"></script> </head> <body>   <div id="app1"> <p>{{name | formartStr}}</p> </div> <div id="app2"> <p>{{name | formartStr}}</p> </div> <script> /* Vue.filter("formartStr", function (value) { // console.log(value); value = value.replace(/学院/g, "大学"); // console.log(value); return value; }); */ // 这里就是MVVM中的View Model let vue1 = new Vue({ el: '#app1', // 这里就是MVVM中的Model data: { name: "知播渔学院, 指趣学院, 前端学院, 区块链学院" }, // 专门用于存储监听事件回调函数 methods: { }, // 专门用于定义计算属性的 computed: { } }); // 这里就是MVVM中的View Model let vue2 = new Vue({ el: '#app2', // 这里就是MVVM中的Model data: { name: "知播渔学院, 指趣学院, 前端学院, 区块链学院" }, // 专门用于存储监听事件回调函数 methods: { }, // 专门用于定义计算属性的 computed: { }, // 专门用于定义局部过滤器的 filters: { "formartStr": function (value) { // console.log(value); value = value.replace(/学院/g, "大学"); // console.log(value); return value; } } }); </script> </body> </html> [代码] 过滤器传参和String的原型方法padStart [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>24-Vue-自定义全局过滤器</title> <script src="js/vue.js"></script> </head> <body>   <div id="app"> <p>{{time | dateFormart("yyyy-MM-dd")}}</p> </div> <script> /* 注意点: 在使用过滤器的时候, 可以在过滤器名称后面加上() 如果给过滤器的名称后面加上了(), 那么就可以给过滤器的函数传递参数 * */ Vue.filter("dateFormart", function (value, fmStr) { // console.log(fmStr); let date = new Date(value); let year = date.getFullYear(); let month = date.getMonth() + 1 + ""; let day = date.getDate() + ""; let hour = date.getHours() + ""; let minute = date.getMinutes() + ""; let second = date.getSeconds() + ""; if(fmStr && fmStr === "yyyy-MM-dd"){ return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`; } return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")} ${hour.padStart(2, "0")}:${minute.padStart(2, "0")}:${second.padStart(2, "0")}`; }); // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { time: Date.now() }, // 专门用于存储监听事件回调函数 methods: { }, // 专门用于定义计算属性的 computed: { } }); </script> </body> </html> [代码] vue过渡动画 trainsition [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>28-Vue-过渡动画</title> <script src="js/vue.js"></script> <style> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: red; } .v-enter{ opacity: 0; } .v-enter-to{ opacity: 1; } .v-enter-active{ transition: all 3s; } .v-leave{ opacity: 1; } .v-leave-to{ opacity: 0; } .v-leave-active{ transition: all 3s; } </style> </head> <body>   <div id="app"> <button @click="toggle">我是按钮</button> <transition> <div class="box" v-show="isShow"></div> </transition> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { isShow: false }, // 专门用于存储监听事件回调函数 methods: { toggle(){ this.isShow = !this.isShow; } }, // 专门用于定义计算属性的 computed: { } }); </script> </body> </html> [代码] 给多个组件添加不同的动画 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>29-Vue-过渡动画</title> <script src="js/vue.js"></script> <style> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: red; } .one-enter{ opacity: 0; } .one-enter-to{ opacity: 1; margin-left: 500px; } .one-enter-active{ transition: all 3s; } .two-enter{ opacity: 0; } .two-enter-to{ opacity: 1; margin-top: 500px; } .two-enter-active{ transition: all 3s; } </style> </head> <body>   <div id="app"> <button @click="toggle">我是按钮</button> <transition appear name="one"> <div class="box" v-show="isShow"></div>  </transition> <transition appear name="two"> <div class="box" v-show="isShow"></div> </transition> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { isShow: true }, // 专门用于存储监听事件回调函数 methods: { toggle(){ this.isShow = !this.isShow; } }, // 专门用于定义计算属性的 computed: { } }); </script> </body> </html> [代码] 通过js钩子执行动画 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>30-Vue-过渡动画</title> <script src="js/vue.js"></script> <style> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: red; } .v-enter{ opacity: 0; } .v-enter-to{ opacity: 1; margin-left: 500px; } .v-enter-active{ transition: all 3s; } </style> </head> <body>   <div id="app"> <button @click="toggle">我是按钮</button>  <transition appear v-bind:css="false" v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter"> <div class="box" v-show="isShow"></div> </transition> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { isShow: true }, // 专门用于存储监听事件回调函数 methods: { toggle(){ this.isShow = !this.isShow; }, beforeEnter(el){ // 进入动画开始之前 console.log("beforeEnter"); el.style.opacity = "0"; }, enter(el, done){ // 进入动画执行过程中 console.log("enter"); /* 注意点: 如果是通过JS钩子来实现过渡动画那么必须在动画执行过程中的回调函数中写上 el.offsetWidth / el.offsetHeight * */ // el.offsetWidth; el.offsetHeight; el.style.transition = "all 3s"; /* 注意点: 动画执行完毕之后一定要调用done回调函数否则后续的afterEnter钩子函数不会被执行 * */ // done(); /* 注意点: 如果想让元素一进来就有动画, 那么最好延迟以下再调用done方法 * */ setTimeout(function () { done(); }, 0); }, afterEnter(el){ // 进入动画执行完毕之后 console.log("afterEnter"); el.style.opacity = "1"; el.style.marginLeft = "500px"; } }, // 专门用于定义计算属性的 computed: { } }); </script> </body> </html> [代码] 自定义类名动画 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>32-Vue-过渡动画</title> <script src="js/vue.js"></script> <style> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: red; } .a{ opacity: 0; } .b{ opacity: 1; margin-left: 500px; } .c{ transition: all 3s; } </style> </head> <body>   <div id="app"> <button @click="toggle">我是按钮</button> <transition appear enter-class="a" enter-active-class="c" enter-to-class="b"> <div class="box" v-show="isShow"></div> </transition> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { isShow: true }, // 专门用于存储监听事件回调函数 methods: { toggle(){ this.isShow = !this.isShow; } }, // 专门用于定义计算属性的 computed: { } }); </script> </body> </html> [代码] Animate动画库的使用 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>33-Vue-过渡动画</title> <script src="js/vue.js"></script> <style> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: red; } </style> <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"> </head> <body>   <div id="app"> <button @click="toggle">我是按钮</button> <transition appear enter-class="" enter-active-class="animated bounceInRight" enter-to-class=""> <div class="box" v-show="isShow"></div> </transition> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { isShow: true }, // 专门用于存储监听事件回调函数 methods: { toggle(){ this.isShow = !this.isShow; } }, // 专门用于定义计算属性的 computed: { } }); </script> </body> </html> [代码] v-for中的key作用 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>35-Vue-过渡动画</title> <script src="js/vue.js"></script> <style> *{ margin: 0; padding: 0; } .v-enter{ opacity: 0; } .v-enter-to{ opacity: 1; } .v-enter-active{ transition: all 3s; } .v-leave{ opacity: 1; } .v-leave-to{ opacity: 0; } .v-leave-active{ transition: all 3s; } </style> </head> <body>   <div id="app"> <form> <input type="text" v-model="name"> <input type="submit" value="添加" @click.prevent="add"> </form> <ul> <transition-group appear> <li v-for="(person,index) in persons" :key="person.id" @click="del(index)"> <input type="checkbox"> <span>{{index}} --- {{person.name}}</span> </li> </transition-group> </ul> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { persons: [ {name: "zs", id: 1}, {name: "ls", id: 2}, {name: "ww", id: 3} ], name: "" }, // 专门用于存储监听事件回调函数 methods: { add(){ let lastPerson = this.persons[this.persons.length - 1]; let newPerson = {name: this.name, id: lastPerson.id + 1}; // this.persons.push(newPerson); this.persons.unshift(newPerson); this.name = ""; }, del(index){ this.persons.splice(index, 1); } }, // 专门用于定义计算属性的 computed: { } }); </script> </body> </html> [代码] transition-group的使用 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>35-Vue-过渡动画</title> <script src="js/vue.js"></script> <style> *{ margin: 0; padding: 0; } .v-enter{ opacity: 0; } .v-enter-to{ opacity: 1; } .v-enter-active{ transition: all 3s; } .v-leave{ opacity: 1; } .v-leave-to{ opacity: 0; } .v-leave-active{ transition: all 3s; } </style> </head> <body>   <div id="app"> <form> <input type="text" v-model="name"> <input type="submit" value="添加" @click.prevent="add"> </form> <ul> <transition-group appear> <li v-for="(person,index) in persons" :key="person.id" @click="del(index)"> <input type="checkbox"> <span>{{index}} --- {{person.name}}</span> </li> </transition-group> </ul> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { persons: [ {name: "zs", id: 1}, {name: "ls", id: 2}, {name: "ww", id: 3} ], name: "" }, // 专门用于存储监听事件回调函数 methods: { add(){ let lastPerson = this.persons[this.persons.length - 1]; let newPerson = {name: this.name, id: lastPerson.id + 1}; // this.persons.push(newPerson); this.persons.unshift(newPerson); this.name = ""; }, del(index){ this.persons.splice(index, 1); } }, // 专门用于定义计算属性的 computed: { } }); </script> </body> </html> [代码] transition-group的注意点 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>36-Vue-过渡动画</title> <script src="js/vue.js"></script> <style> *{ margin: 0; padding: 0; } .v-enter{ opacity: 0; } .v-enter-to{ opacity: 1; } .v-enter-active{ transition: all 3s; } .v-leave{ opacity: 1; } .v-leave-to{ opacity: 0; } .v-leave-active{ transition: all 3s; } </style> </head> <body>   <div id="app"> <form> <input type="text" v-model="name"> <input type="submit" value="添加" @click.prevent="add"> </form>  <transition-group appear tag="ul"> <li v-for="(person,index) in persons" :key="person.id" @click="del(index)"> <input type="checkbox"> <span>{{index}} --- {{person.name}}</span> </li> </transition-group>  </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { persons: [ {name: "zs", id: 1}, {name: "ls", id: 2}, {name: "ww", id: 3} ], name: "", id: 3 }, // 专门用于存储监听事件回调函数 methods: { add(){ this.id++; // let lastPerson = this.persons[this.persons.length - 1]; let newPerson = {name: this.name, id: this.id}; // this.persons.push(newPerson); this.persons.unshift(newPerson); this.name = ""; }, del(index){ this.persons.splice(index, 1); } }, // 专门用于定义计算属性的 computed: { } }); </script> </body> </html> [代码] 组件化开发自定义全局组件 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>37-Vue组件-自定义全局组件</title> <script src="js/vue.js"></script> </head> <body>   <div id="app">  <abc></abc> </div> <script> // 3.1创建组件构造器 let Profile = Vue.extend({ // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素 template: ` <div> <img src="images/fm.jpg"/> <p>我是描述信息</p> </div> ` }); // 3.2注册已经创建好的组件 // 第一个参数: 指定注册的组件的名称 // 第二个参数: 传入已经创建好的组件构造器 Vue.component("abc", Profile ); // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { }, // 专门用于存储监听事件回调函数 methods: { }, // 专门用于定义计算属性的 computed: { } }); </script> </body> </html> [代码] 自定义全局组件的注意点首先vue.component(组件名，组件对象)可以代替vue.extend script标签中可以定义组件，加上id属性 template标签加上id属性才是vue官方的方式 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>38-Vue组件-自定义全局组件</title> <script src="js/vue.js"></script> </head> <body>   <div id="app">  <abc></abc> </div>  <template id="info"> <div> <img src="images/fm.jpg"/> <p>我是描述信息</p> </div> </template> <script> // 3.1创建组件构造器 /* let Profile = Vue.extend({ // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素 template: ` <div> <img src="images/fm.jpg"/> <p>我是描述信息</p> </div> ` }); */ /* let obj = { // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素 template: ` <div> <img src="images/fm.jpg"/> <p>我是描述信息</p> </div> ` }; */ // 3.2注册已经创建好的组件 // 第一个参数: 指定注册的组件的名称 // 第二个参数: 传入已经创建好的组件构造器 // Vue.component("abc", Profile ); // Vue.component("abc", obj ); /* Vue.component("abc", { // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素 template: ` <div> <img src="images/fm.jpg"/> <p>我是描述信息</p> </div> ` }); */ Vue.component("abc", { // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素 template: "#info" }); // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { }, // 专门用于存储监听事件回调函数 methods: { }, // 专门用于定义计算属性的 computed: { } }); </script> </body> </html> [代码] 自定义局部组件 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>39-Vue组件-自定义局部组件</title> <script src="js/vue.js"></script> </head> <body>   <div id="app1"> <abc></abc> </div> <div id="app2"> <abc></abc> </div> <template id="info"> <div> <img src="images/fm.jpg"/> <p>我是描述信息</p> </div> </template> <script> /* // 自定义全局组件 Vue.component("abc", { // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素 template: "#info" }); */ // 这里就是MVVM中的View Model let vue1 = new Vue({ el: '#app1', // 这里就是MVVM中的Model data: { }, // 专门用于存储监听事件回调函数 methods: { }, // 专门用于定义计算属性的 computed: { } }); // 这里就是MVVM中的View Model let vue2 = new Vue({ el: '#app2', // 这里就是MVVM中的Model data: { }, // 专门用于存储监听事件回调函数 methods: { }, // 专门用于定义计算属性的 computed: { }, // 专门用于定义局部组件的 components: { "abc": { // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素 template: "#info" } } }); </script> </body> </html> [代码]

2021-11-16

7收藏8评论1337浏览

如何在小程序中快速实现环形进度条

在小程序开发过程中经常涉及到一些图表类需求，其中环形进度条比较属于比较常见的需求 [图片] [中间的文字部分需要自己实现，因为每个项目不同，本工具只实现进度条] 上图中，一方面我们我们需要实现动态计算弧度的进度条，还需要在进度条上加上渐变效果，如果每次都需要自己手写，那需要很多重复劳动，所以决定为为小程序生态圈贡献一份小小的力量，下面来介绍一下整个工具的实现思路，喜欢的给个star咯 https://github.com/lucaszhu2zgf/mp-progress 环形进度条由灰色底圈+渐变不确定圆弧+双色纽扣组成，首先先把页面结构写好： .canvas{ position: absolute; top: 0; left: 0; width: 400rpx; height: 400rpx; } 因为进度条需要盖在文字上面，所以采用了绝对定位。接下来先把灰色底圈给画上： const context = wx.createContext(); // 打底灰色曲线 context.beginPath(); context.arc(this.convert_length(200), this.convert_length(200), r, 0, 2*Math.PI); context.setLineWidth(12); context.setStrokeStyle('#f0f0f0'); context.stroke(); wx.drawCanvas({ canvasId: 'progress', actions: context.getActions() }); 效果如下： [图片] 接下来就要画绿色的进度条，渐变暂时先不考虑 // 圆弧角度 const deg = ((remain/total).toFixed(2))*2*Math.PI; // 画渐变曲线 context.beginPath(); // 由于外层大小是400，所以圆弧圆心坐标是200,200 context.arc(this.convert_length(200), this.convert_length(200), r, 0, deg); context.setLineWidth(12); context.setStrokeStyle('#56B37F'); context.stroke(); // 辅助函数，用于转换小程序中的rpx convert_length(length) { return Math.round(wx.getSystemInfoSync().windowWidth * length / 750); } [图片] 似乎完成了一大部分，先自测看看不是满圆的情况是啥样子，比如现在剩余车位是120个 [图片] 因为圆弧函数arc默认的起点在3点钟方向，而设计想要的圆弧的起点从12点钟方向开始，现在这样是没法达到预期效果。是不是可以使用css让canvas自己旋转-90deg就好了呢？于是我在上面的canvas样式中新增以下规则： .canvas{ transform: rotate(-90deg); } 但是在真机上并不起作用，于是我把新增的样式放到包裹canvas的外层元素上，发现外层元素已经旋转，可是圆弧还是从3点钟方向开始的，唯一能解释这个现象的是官方说：小程序中的canvas使用的是原生组件，所以这样设置css并不能达到我们想要的效果 [图片] 所以必须要在canvas画图的时候把坐标原点移动到弧形圆心，并且在画布内旋转-90deg [图片] // 更换原点 context.translate(this.convert_length(200), this.convert_length(200)); // arc原点默认为3点钟方向，需要调整到12点 context.rotate(-90 * Math.PI / 180); // 需要注意的是，原点变换之后圆弧arc原点也变成了0,0 真机预览效果达成预期 [图片] 接下来添加环形渐变效果，但是canvas原本提供的渐变类型只有两种： 1、LinearGradient线性渐变 [图片] 2、CircularGradient圆形渐变 [图片] 两种渐变中离设计效果最近的是线性渐变，至于为什么能够形成似乎是随圆形弧度增加而颜色变深的效果也只是控制坐标开始和结束的坐标位置罢了 const grd = context.createLinearGradient(0, 0, 100, 90); grd.addColorStop(0, '#56B37F'); grd.addColorStop(1, '#c0e674'); // 画渐变曲线 context.beginPath(); context.arc(0, 0, r, 0, deg); context.setLineWidth(12); context.setStrokeStyle(grd); context.stroke(); 来看一下真机预览效果： [图片] 非常棒，最后就剩下跟随进度条的纽扣效果了 [图片] 根据三角函数，已知三角形夹角根据公式radian = 2*Math.PI/360*deg，再利用cos和sin函数可以x、y，从而计算出纽扣在各部分半圆的坐标 const mathDeg = ((remain/total).toFixed(2))*360; // 计算弧度 let radian = ''; // 圆圈半径 const r = +this.convert_length(170); // 三角函数cos=y/r，sin=x/r，分别得到小点的x、y坐标 let x = 0; let y = 0; if (mathDeg <= 90) { // 求弧度 radian = 2*Math.PI/360*mathDeg; x = Math.round(Math.cos(radian)*r); y = Math.round(Math.sin(radian)*r); } else if (mathDeg > 90 && mathDeg <= 180) { // 求弧度 radian = 2*Math.PI/360*(180 - mathDeg); x = -Math.round(Math.cos(radian)*r); y = Math.round(Math.sin(radian)*r); } else if (mathDeg > 180 && mathDeg <= 270) { // 求弧度 radian = 2*Math.PI/360*(mathDeg - 180); x = -Math.round(Math.cos(radian)*r); y = -Math.round(Math.sin(radian)*r); } else{ // 求弧度 radian = 2*Math.PI/360*(360 - mathDeg); x = Math.round(Math.cos(radian)*r); y = -Math.round(Math.sin(radian)*r); } [图片] 有了纽扣的圆形坐标，最后一步就是按照设计绘制样式了 // 画纽扣 context.beginPath(); context.arc(x, y, this.convert_length(24), 0, 2 * Math.PI); context.setFillStyle('#ffffff'); context.setShadow(0, 0, this.convert_length(10), 'rgba(86,179,127,0.5)'); context.fill(); // 画绿点 context.beginPath(); context.arc(x, y, this.convert_length(12), 0, 2 * Math.PI); context.setFillStyle('#56B37F'); context.fill(); 来看一下最终效果 [图片] 最后我重新review了整个代码逻辑，并且已经将代码开源到https://github.com/lucaszhu2zgf/mp-progress，欢迎大家使用

2020-05-27

36收藏30评论25176浏览

微信小程序，商城订单列表，tab切换+分页加载+局部刷新怎么做？

tab切换：【全部】，【待支付】，【待使用】，【售后】分页加载: 不用解释了吧局部刷新：某一条订单，比如开始是待支付状态，进入【订单详情页】，“支付”或者“取消订单”，返回【订单列表】，需要把【这一条】订单更新为最新状态。比如我在【待支付】页签下，每10条加载一次。已经看到了第30条。点进去，进入订单详情。在订单详情支付了。返回订单列表，待支付应该只有29条，第30条现在已经是【已支付】状态了。如果我之前是从【全部】页签进去的，那么这条订单上面的数据还在，只有这条数据变为【已支付】状态

2021-01-25

1收藏6评论13097浏览

发布小程序提示要设置用户隐私保护？

[图片] 之前发布小程序都没遇到过，今天发布小程序突然出现要设置用户隐私保护

2021-11-02

1收藏6评论3422浏览

小程序富文本能力的深入研究与应用

前言在开发小程序的过程中，很多时候会需要使用富文本内容，然而现有的方案都有着或多或少的缺陷，如何更好的显示富文本将是一个值得继续探索的问题。 [图片] 现有方案 WxParse [代码]WxParse[代码] 作为一个应用最为应用最广泛的富文本插件，在很多时候是大家的首选，但其也明显的存在许多问题。格式不正确时标签会被原样显示很多人可能都见到过这种情况，当标签里的内容出现格式上的错误（如冒号不匹配等），在[代码]WxParse[代码]中都会被认为是文本内容而原样输出，例如：[代码]<span style="font-family:"宋体"">Hello World!</span> [代码] 这是由于[代码]WxParse[代码]的解析脚本中，是通过正则匹配的方式进行解析，一旦格式不正确，就将导致无法匹配而被直接认为是文本[代码]//WxParse的匹配模式 var startTag = /^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/, endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/, attr = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g; [代码] 然而，[代码]html[代码] 对于格式的要求并不严格，一些诸如冒号不匹配之类的问题是可以被浏览器接受的，因此需要在解析脚本的层面上提高容错性。超过限定层数时无法显示这也是一个让许多人十分苦恼的问题，[代码]WxParse[代码] 通过 [代码]template[代码] 迭代的方式进行显示，当节点的层数大于设定的 [代码]template[代码] 数时就会无法显示，自行增加过多的层数又会大大增加空间大小，因此对于 [代码]wxml[代码] 的渲染方式也需要改进。对于表格、列表等复杂内容支持性差 [代码]WxParse[代码] 对于 [代码]table[代码]、[代码]ol[代码]、[代码]ul[代码] 等支持性较差，类似于表格单元格合并，有序列表，多层列表等都无法渲染 rich-text [代码]rich-text[代码] 组件作为官方的富文本组件，也是很多人选择的方案，但也存在着一些不足之处一些常用标签不支持 [代码]rich-text[代码] 支持的标签较少，一些常用的标签（比如 [代码]section[代码]）等都不支持，导致其很难直接用于显示富文本内容 ps：最新的 2.7.1 基础库已经增加支持了许多语义化标签，但还是要考虑低版本兼容问题不能实现图片和链接的点击 [代码]rich-text[代码] 组件中会屏蔽所有结点事件，这导致无法实现图片点击预览，链接点击效果等操作，较影响体验不支持音视频音频和视频作为富文本的重要内容，在 [代码]rich-text[代码] 中却不被支持，这也严重影响了使用体验共同问题不支持解析 [代码]style[代码] 标签现有的方案中都不支持对 [代码]style[代码] 标签中的内容进行解析和匹配，这将导致一些标签样式的不正确 [图片] 方案构建因此要解决上述问题，就得构建一个新的方案来实现渲染方式对于该节点下没有图片、视频、链接等的，直接使用 [代码]rich-text[代码] 显示（可以减少标签数，提高渲染效果），否则则继续进行深入迭代，例如： [图片] 对于迭代的方式，有以下两种方案：方案一像 [代码]WxParse[代码] 那样通过 [代码]template[代码] 进行迭代，对于小于 20 层的内容，通过 [代码]template[代码] 迭代的方式进行显示，超过 20 层时，用 [代码]rich-text[代码] 组件兜底，避免无法显示，这也是一开始采用的方案[代码] <template name='rich-text-floor20'> <block wx:for='{{nodes}}' wx:key> <rich-text nodes="{{item}}" /> </block> </template> [代码] 方案二添加一个辅助组件 [代码]trees[代码]，通过组件递归的方式显示，该方式实现了没有层数的限制，且避免了多个重复性的 [代码]template[代码] 占用空间，也是最终采取的方案[代码] <trees wx:else id="node" class="{{item.name}}" style="{{item.attrs.style}}" nodes="{{item.children}}" controls="{{controls}}" /> [代码] 解析脚本从 [代码]htmlparser2[代码] 包进行改写，其通过状态机的方式取代了正则匹配，有效的解决了容错性问题，且大大提升了解析效率 [代码]//不同状态各通过一个函数进行判断和状态跳转 for (; this._index < this._buffer.length; this._index++) this[this._state](this._buffer[this._index]); [代码] 兼容 [代码]rich-text[代码] 为了解析结果能同时在 [代码]rich-text[代码] 组件上显示，需要对一些 [代码]rich-text[代码]不支持的组件进行转换[代码]//以u标签为例 case 'u': name = 'span'; attrs.style = 'text-decoration:underline;' + attrs.style; break; [代码] 适配渲染需要在渲染过程中，需要对节点下含有图片、视频、链接等不能由 [代码]rich-text[代码]直接显示的节点继续迭代，否则直接使用 [代码]rich-text[代码] 组件显示；因此需要在解析过程中进行标记，遇到 [代码]img[代码]、[代码]video[代码]、[代码]a[代码] 等标签时，对其所有上级节点设置一个 [代码]continue[代码] 属性用于区分[代码]case 'a': attrs.style = 'color:#366092;display:inline;word-break:break-all;overflow:auto;' + attrs.style; element.continue = true; //冒泡：对上级节点设置continue属性 this._bubbling(); break; [代码] 处理style标签解析方式方案一正则匹配[代码]var classes = style.match(/[^\{\}]+?\{([^\{\}]*?({[\s\S]*?})*)*?\}/g); [代码] 缺陷：当 [代码]style[代码] 字符串较长时，可能出现栈溢出的问题对于一些复杂的情况，可能出现匹配失败的问题方案二状态机的方式，类似于 [代码]html[代码] 字符串的处理方式，对于 [代码]css[代码] 的规则进行了调整和适配，也是目前采取的方案匹配方式方案一将 [代码]style[代码] 标签解析为一个形如 [代码]{key:content}[代码] 的结构体，对于每个标签，通过访问结构体的相应属性即可知晓是否匹配成功[代码]if (this._style[name]) attrs.style += (';' + this._style[name]); if (this._style['.' + attrs.class]) attrs.style += (';' + this._style['.' + attrs.class]); if (this._style['#' + attrs.id]) attrs.style += (';' + this._style['#' + attrs.id]); [代码] 优点：匹配效率高，适合前端对于时间和空间的要求缺点：对于多层选择器等复杂情况无法处理因此在前端组件包中采取的是这种方式进行匹配方案二将 [代码]style[代码] 标签解析为一个数组，每个元素是形如 [代码]{key,list,content,index}[代码] 的结构体，主要用于多层选择器的匹配，内置了一个数组 [代码]list[代码] 存储各个层级的选择器，[代码]index[代码] 用于记录当前的层数，匹配成功时，[代码]index++[代码]，匹配成功的标签出栈时，[代码]index--[代码]；通过这样的方式可以匹配多层选择器等更加复杂的情况，但匹配过程比起方案一要复杂的多。 [图片] 遇到的问题 [代码]rich-text[代码] 组件整体的显示问题在显示过程中，需要把 [代码]rich-text[代码] 作为整体的一部分，在一些情况下会出现问题，例如： [代码]Hello <rich-text nodes="<div style='display:inline-block'>World!</div>"/> [代码] 在这种情况下，虽然对 [代码]rich-text[代码] 中的顶层 [代码]div[代码] 设置了 [代码]display:inline-block[代码]，但没有对 [代码]rich-text[代码] 本身进行设置的情况下，无法实现行内元素的效果，类似的还有 [代码]float[代码]、[代码]width[代码](设置为百分比时)等情况解决方案方案一用一个 [代码]view[代码] 包裹在 [代码]rich-text[代码] 外面，替代最外层的标签[代码]<view style="{{item.attrs.style}}"> <rich-text nodes="{{item.children}}" /> </view> [代码] 缺陷：当该标签为 [代码]table[代码]、[代码]ol[代码] 等功能性标签时，会导致错误方案二对 [代码]rich-text[代码] 组件使用最外层标签的样式[代码]<rich-text nodes="{{item}}" style="{{item.attrs.style}}" /> [代码] 缺陷：当该标签的 [代码]style[代码] 中含有 [代码]margin[代码]、[代码]padding[代码] 等内容时会被缩进两次方案三通过 [代码]wxs[代码] 脚本将顶层标签的 [代码]display[代码]、[代码]float[代码]、[代码]width[代码] 等样式提取出来放在 [代码]rich-text[代码] 组件的 [代码]style[代码] 中，最终解决了这个问题[代码]var res = ""; var reg = getRegExp("float\s*:\s*[^;]*", "i"); if (reg.test(style)) res += reg.exec(style)[0]; reg = getRegExp("display\s*:\s*([^;]*)", "i"); if (reg.test(style)) { var info = reg.exec(style); res += (';' + info[0]); display = info[1]; } else res += (';display:' + display); reg = getRegExp("[^;\s]*width\s*:\s*[^;]*", "ig"); var width = reg.exec(style); while (width) { res += (';' + width[0]); width = reg.exec(style); } return res; [代码] 图片显示的问题在 [代码]html[代码] 中，若 [代码]img[代码] 标签没有设置宽高，则会按照原大小显示；设置了宽或高，则按比例进行缩放；同时设置了宽高，则按设置的宽高进行显示；在小程序中，若通过 [代码]image[代码] 组件模拟，需要通过 [代码]bindload[代码] 来获取图片宽高，再进行 [代码]setData[代码]，当图片数量较大时，会大大降低性能；另外，许多图片的宽度会超出屏幕宽度，需要加以限制解决方案用 [代码]rich-text[代码] 中的 [代码]img[代码] 替代 [代码]image[代码] 组件，实现更加贴近 [代码]html[代码] 的方式；对 [代码]img[代码] 组件设置默认的效果 [代码]max-width:100%;[代码] 视频显示的问题当一个页面出现过多的视频时，同时进行加载可能导致页面卡死解决方案在解析过程中进行计数，若视频数量超过3个，则用一个 [代码]wxss[代码] 绘制的图片替代 [代码]video[代码] 组件，当受到点击时，再切换到 [代码]video[代码] 组件并设置 [代码]autoplay[代码] 以模拟正常效果，实现了一个类似懒加载的功能 [代码] <view wx:if="{{item.attrs.id>'media3'&&!controls[item.attrs.id].play}}" class="video" data-id="{{item.attrs.id}}" bindtap="_loadVideo"> <view class="triangle_border_right"></view> </view> <video wx:else src='{{controls[item.attrs.id]?item.attrs.source[controls[item.attrs.id].index]:item.attrs.src}}' id="{{item.attrs.id}}" autoplay="{{item.attrs.autoplay||controls[item.attrs.id].play}}" /> [代码] 文本复制的问题小程序中只有 [代码]text[代码] 组件可以通过设置 [代码]selectable[代码] 属性来实现长按复制，在富文本组件中实现这一功能就存在困难解决方案在顶层标签上加上 [代码]user-select:text;-webkit-user-select[代码] [图片] 实现更加丰富的功能在此基础上，还可以实现更多有用的功能自动设置页面标题在浏览器中，会将 [代码]title[代码] 标签中的内容设置到页面标题上，在小程序中也同样可以实现这样的功能[代码]if (res.title) { wx.setNavigationBarTitle({ title: res.title }) } [代码] 多资源加载由于平台差异，一些媒体文件在不同平台可能兼容性有差异，在浏览器中，可以通过 [代码]source[代码] 标签设置多个源，当一个源加载失败时，用下一个源进行加载和播放，在本插件中同样可以实现这样的功能[代码]errorEvent(e) { //尝试加载其他源 if (!this.data.controls[e.currentTarget.dataset.id] && e.currentTarget.dataset.source.length > 1) { this.data.controls[e.currentTarget.dataset.id] = { play: false, index: 1 } } else if (this.data.controls[e.currentTarget.dataset.id] && e.currentTarget.dataset.source.length > (this.data.controls[e.currentTarget.dataset.id].index + 1)) { this.data.controls[e.currentTarget.dataset.id].index++; } this.setData({ controls: this.data.controls }) this.triggerEvent('error', { target: e.currentTarget, message: e.detail.errMsg }, { bubbles: true, composed: true }); }, [代码] 添加加载提示可以在组件的插槽中放入加载提示信息或动画，在加载完成后会将 [代码]slot[代码] 的内容渐隐，将富文本内容渐显，提高用户体验，避免在加载过程中一片空白。最终效果经过一个多月的改进，目前实现了这个功能丰富，无层数限制，渲染效果好，轻量化（30.0KB），效率高，前后端通用的富文本插件，体验小程序的用户数已经突破1k啦，欢迎使用和体验 [图片] github 地址 npm 地址总结以上就是我在开发这样一个富文本插件的过程大致介绍，希望对大家有所帮助；本人在校学生，水平所限，不足之处欢迎提意见啦！ [图片]

2020-12-27

72收藏35评论23161浏览

开发者工具升级最新后运行报错？

开发者工具升级到1.5.2106250 _typeof4 is not a function [图片] 回退版本后问题不出现

2021-06-29

1收藏2评论6848浏览

关于生成小程序二维码

问下小程序端能不能自己生成小程序二维码不调用后端

2019-06-20

1收藏1评论28283浏览

前端吧图片二进制流数据转成可显示的图片地址

开发一个功能，生成的海报上显示小程序码，后台返回给前端是一个图片二进制数据流，前端怎么把二进制数据流转成可显示的图片地址呢

2019-01-16

2收藏8评论22665浏览

iconfont硬核，支持多色彩、支持自定义颜色

目前市面上很多教程叫我们如何把iconfont的字体整到小程序中，基本千篇一律，都有一个特点，就是需要用字体文件。但是用字体文件意味着只能设置一种颜色了（单色）。这是个硬伤~~~ 所以，今天笔者花了一天时间，做了一个支持多色彩、支持自定义颜色的iconfont开源库。你一定会喜欢 [代码]<iconfont name="alipay" /> <iconfont name="alipay" color="{{['red', 'orange']}}" size="300" /> [代码] [图片] 特性： 1、纯组件 2、不依赖字体文件 3、支持px和rpx两种格式 4、原样渲染多色彩图标 4、图标颜色可定制地址：https://github.com/iconfont-cli/mini-program-iconfont-cli 喜欢的小伙伴记得给个star呦。

2019-09-26

10收藏4评论5036浏览

小打卡|如何组件化拆分一个200+页面的小程序

大家好，我是小打卡的前端唐驰。刚才金轩正同学分享了基于原生小程序底层架构，在此基础上我为大家分享下如何拆分一个200+页面的小程序，主要通过以下几点来聊一聊小打卡在组件化路上的一些实践 1.背景 2.组件与方案 3.组件间通讯 4.基于组件我们做了哪些事 [图片] [图片] 1. 其实一开始小打卡是没有引入组件化的，因为微信最开始是不支持组件化的。当时js代码已经4k+行了，各种功能代码，有用的没有用的，不知道干什么的代码就躺在那里，一动不动。举个例子，一个头像点击跳转的逻辑搜索了下，遍布在各个页面。修改起来可想而知的胆战心惊。另一个原因就是当时由于业务功能直线上升，很快我们就遇到了代码包超包了。在微信还没有实现分包之前，我们就只能一个一个页面的去review剔除代码，效率极低。这也是促成我们决定寻求出路的原因之一。可是删代码删功能是不能解决问题，期间我们也考虑过h5的方式，跑了demo之后却发现h5方式的多次渲染，与加载首页白屏，尽管有各种服务端渲染方案，但是我们一致觉得为了用户体验，放弃了。 [图片] 2. 对于小打卡来说，我们不能再任由项目裸奔了，需要一种开发方式来进行约束，主要是有几个诉求：在之前的项目上，为了方便。功能与功能之间的耦合程度极其的高，各种为了使用方便而随意修改某一个方法。 1.降低页面上各个功能点的耦合程度我们不希望同一个功能点同样的代码在页面肆意copy，这样带来了极高的维护成本。以至后面无法维护。并且功能的复用不希望是copy，前端与后端不同的是不仅是单单的逻辑复用、更有布局、样式等。 2.提供代码的可复用性、可维护性对于一个程序员来说，如果你打开一个代码文件。映入眼帘的是密密麻麻的代码，行数达到好几千K行，我相信大家的第一反应是抗拒的，更别说去修改代码，天知道会改出什么问题。 3.降低单一文件的复杂度 4.如果是公共功能的化我们还希望它能够有自己的作用域，保持自己的独立性。 [图片] 3. 根据以上几点，我们用一个页面举例，如何去拆分一个页面，首先我们需要有以下几点认识：决定一个页面如何组件化的前提是该页面的功能是否是有全局都需要的功能模块功能模块是否需要与页面其他模块强耦合单个功能模块逻辑是否过于复杂（占用代码空间过大）——>单纯是为了页面代码的可读性。不是全拆成组件就是最好的，不能为了组件而组件化 [图片] 4. 说了这么多，其实我们应该首先应该了解下，组件的特性？专一性（一个组件只干一件事情，或者某一类事情。）功能的高度内聚比如说右侧的feed集上的头像、它是一个组件、就负责显示头像跟跳转，其他的事它都不参与可配置（能够适应通过设置属性值的方式来输出不同的东西）输入影响部分输出然后我们同时可以设置头像组件上的size属性来设置头像在不同页面下的大小样式生命周期（组件可以在自身或者说所在页面的生命周期内可以做不同的事情）比如可以在组件生成的时候进行数的初始化、属性值的类型校验、组件销毁时并同时销毁定时器等其他任务事件传递（既然要让组件与页面保持独立性，那么组件与页面的通讯交互就得需要一个标准）右侧的feed组件其实是一个组件集合、我们通过组合不同的组件然后就形成了feed组件。就跟搭积木一样、只需要引入组件就行了。特别方便。 [图片] 5. 说到组件，那么小程序早期的不支持自定义组件开发这就很让人头疼、同样的feed组件我们经历了几乎三个版本的大改动、从最开始的直接写在页面里，后台使用template方式、再到后来的自定义组件方式。所以我们的演进步骤就成了page->template->component, 这儿列了一个表格对比了下几种组件化方式的对比。可以看到，include的方式其实是最鸡肋的，include的方式其实实际意义上我理解成更多的是代码的切割，并且还不能将（template、wxs）分出去、所以这种方式我们直接pass掉了，而template的方式其实是我们曾经主力使用的方式、到现在我们也还在使用、相对于include来说，template有了独立的作用域、虽然css、跟js还是与页面共享的。但是已经可以做一些比较简单的事情了。对于component来说，完完全全的组件，满足了组件的所有要求。 [图片] 6. 先说说template的方式吧，举个列子，这个是我们的使用template构建的头像组件。跟写页面的方式很像、同样是js、wxss、wxml组成。用名称来命名。但是由于微信当时没有很方的方式去引用这些文件，或者说没有一种方法可以打包供我们很方便的使用。但是比起之前直接copy代码的方式、这样通过引用的方式使用其实感觉已经好了很多了。 [图片] [图片] 7. 具体的使用方式我画了张图，对应组件内文件与页面文件的对应方式、这里对于js的引用其实我们是做了一些小动作，我们在调用Page方法前做了一次page方法与组件方法的check，因为在page代码里我们不能保证所有的方法名不会跟组件内的方法名不会冲突，所以我们做了这个一个检查、然后mix函数还做了另一个事情就是将page方法与组件方法合并。然后对于mix函数其实我们还可以做很多事情、、比如规范生命周期回调函数放在一个对象内，然后我们自己定义的方法放在另一个对象里，就跟vue一样。 But，在经历了一段template组件化的时间后，我们又觉得这个方式还是有点烂，为什么呢？在使用时仍然不能避免引入众多的文件、虽然我们对js文件做了处理，但是wxss的样式仍然会被污染、js与page仍然共享作用域。并不能成为一个真正的标准组件。好在后来，微信上了自定义组件的功能，接下来聊聊这个标准的微信自定义组件吧。 8. 微信提供了自定义组件的功能后我们也第一时间跟进了，相对于template这种方式来说，现在是真正的独立于页面存在。使用也比之前更为方便与简洁，右图是我们对component的一个项目目录划分。我们将component划分为了公共组件与页面组件、为什么会有页面组件， 1.是为了降低页面代码的复杂度 2.为了好看。公共组件就不说了，一定是最基础、最通用的组件。 [图片] 9. 转向component方式后有一个问题逐渐便凸显出来了，由于组件的独立作用域，组件间的通讯就成了一个问题，接下来聊一聊组件的事件传递。微信最开始的时候提供了一种triggerEvent的方式，可是这样的方式似乎并不能满足我们某些场景下的需求。后来又提供了page下selectComponent方法来直接操作组件内部的属性与方法。然后还有就是基于我们自己的事件广播机制。这几种方式构成了小打卡现目前最主要的组件与page、组件与组件间的数据交互方式 [图片] 10. 先来说说triggerEvent模式,微信在自定义组件上可以自定义监听函数。我们在组件内将需要向外抛出的事件统一通过this.triggerEvent(‘invoke’,{handler:’fun’,data:{}})这个方法来执行。其中invoke对应了我们绑定在组件标签上的监听函数。而将需要外部执行的方法与数据通过数据的方式传给监听函数。而在page上面我通过统一的监听回调函数去自动执行需要执行的方法、这里的trigger与event都不要我们去手写在组件与page创建的时候底层就已经帮我们预置了，我们只需要关注业务开发就行。这是对于一部分需要page与组件交互的模式。而对于我们想直接操作组件方法而不需要反馈的模式就得使用selectComponent的模式 [图片] 11. 一个简单的列子：全局的toast组件。在需要弹出toast的时候我们想直接调用就行、不用在通过传值给组件、然后由组件来执行显示或隐藏。这类组件我们在组件目录里新增了一个lib的文件。在page里只需要引入这个lib文件然后就可以直接调用toast组件。lib主要是对this.selectCompent与执行逻辑的一个封装。 [图片] 12. 事件发布订阅模式：基于底层的eventBus。简化后我们用在了组件与组件之间的通讯上、特点是简单。 [图片] 13. 解决了组件间的通讯问题，可是对于公共组件的引用仍然让我们觉得麻烦与不畅快、所以我们构建了全局通用模版、它是干什么的呢。它提供给了一些基础的全局组件、比如自定义导航头、toast、loading等等。小打卡所有的页面都通过slot的方式插入到这个模版组件x-page下面。这样就解决了我们需要在每个页面引入公共组件的问题。另一个问题使用自定义导航栏的时定位起点会有状态栏下移动到屏幕左上方。会造成布局的错误。通过x-page可以很好解决这个问题而不用重新布局。并且通信问题也不用担心，都是由x-page组件作为中台来对内对外进行分发与执行。 [图片] [图片] [图片] 14. 通过以上小打卡的开发模式就基本形成。要做的事情还有很多，更多组件的玩儿法，对于现在或者将来我们正在做的。是构建小打卡的组件与基础sdk的仓库。拆分组件开发与业务开发。通过npm包管理的方式来应对越来越多的小程序平台的开发。或者通过形成小程序插件的方式供其他小伙伴使用。 [图片] [图片] 以上就是我今天分享的内容。谢谢。

2019-04-26

55收藏12评论11970浏览

GitHub账号

选择需要上架的开放服务

案例类型