--- theme: nico highlight: zenburn --- “ ***本文正在参加[「金石计划 . 瓜分6万现金大奖」](https://juejin.cn/post/7162096952883019783 "https://juejin.cn/post/7162096952883019783")*** ” # 一、前言一些微信小程序开发技巧，希望能帮助到大家 # 二、behaviors （`bɪ'heɪvjəz` 行为）先看看官方文档是如何介绍的 > `behaviors` 是用于组件间代码共享的特性，类似于一些编程语言中的 “mixins” 或 “traits”。再看下官方的解释 > `behavior` 可以包含一组属性、数据、生命周期函数和方法。**组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用** 这个其实大家可以理解为是一个`公共`的`组件`的`js`文件，这个`js`文件可以在你的`任何`组件页面内引用，引入后你的`被引用`的js文件就拥有了你引入的这个`behaviors.js`中的一切方法及变量 ## 使用新建`js`文件，注册`Behavior` ```js module.exports = Behavior({ properties: {}, data: { name: '业务崽', age: '18' }, methods: { fun1() { console.log('fun1') }, fun2() { console.log('fun2') } }, }) ``` 页面1引入`Behavior` ```js // js var myBehavior = require('./myBehavior/index.js') Component({ behaviors: [myBehavior] }) ``` ```html /** wxml **/ {{ name }} // 业务崽 // fun1 ``` 页面2引入`Behavior` ```js // js var myBehavior = require('./myBehavior/index.js') Component({ behaviors: [myBehavior] }) ``` ```html /** wxml **/ {{ name }} {{ age }} // 业务崽 18 // fun2 ``` # 三、页面下拉出现二楼交互若想在小程序内实现类似淘宝、京东等下拉出现二楼的交互，应该怎么实现？ ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a229a90ed3274f8197dcbe8d1ebb115a~tplv-k3u1fbpfcp-watermark.image?) 接到这个需求后尝试了很多方案，因为微信小程序会自带一个下拉刷新的操作，就算不启用下拉刷新，下拉屏幕时也会使屏幕多一截白屏，所以这里给一个最佳解决方案 ```html

二楼下拉内容

页面内容

``` 可使用`swiper`自带方法监听滑动距离，添加自定义交互效果 > Tips: 如果遇到`swiper`过大导致页面无法下拉，包一层`scroll-view`即可解决 ```html

``` # 四、router 微信小程序若要进行页面跳转只能使用微信小程序的跳转方法，例如：`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`等... 那要是想使用`router`来进行路由操作，应该如何实现呢？ ## 实现根目录创建`router`文件夹 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e086dd51a889499ba4fc46c9db181c11~tplv-k3u1fbpfcp-watermark.image?) 可根据业务、分包不同将页面路由进行单文件管理，这里用`page1`、`page2`代替 **page1.js** ```js export default [ { name: 'page1', title: '页面1', url: 'pages/page1/index' } ] ``` **page2.js** ```js export default [ { name: 'page2', title: '页面2', url: 'pages/page2/index' } ] ``` **pages.js** ```js import page1 from './page1' import page2 from './page2' export default [ ...page1, ...page2 ] ``` **index.js** 因为代码过多，这里只放一个大概结构，有需要完整代码的，评论区评论 ```js import pages from 'pages' // 注册页面 function _getPages_() { if (!pages || pages.constructor !== Array) { return [] } pages.forEach(item => { if (item.url.slice(0, 1) !== '/') { item.url = '/' + item.url } }) return pages } export default class Router { constructor() { this.pages = _getPages_() this.params = null } // 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面 push(name, params = null, navigateType = {}) {} // 关闭所有页面，打开到应用内的某个页面可传递参数可跳转到Tabbar页面 reLaunch(name, params = null) {} // 关闭当前页面，打开到应用内的某个页面可传递参数不可重定向到Tabbar页面 redirect(name, params = null) {} // 跳转指定的tab页 switchTab(name) {} // 关闭当前页面，返回上一页面或多级页面。没有参数代表返回上一页 back() {delta = 1, params = null} // 关闭所有页面返回到首页 backHome(params = null) {} // 获取指定的Page getPageFor(name) {} } ``` **app.js** 给app设置$router 属性 ```js import MiniRouter from '/router/index' App({ onLaunch () { this.$router = new MiniRouter() } }) ``` > Tips: 用`router`定义了路由后，不是说`app.json`里就不用注册了，`app.json`里同样需注册路由 ## 使用 ```js // 需要在使用的页面先获取app const app = getApp() // 用法：1 app.$router.push("page1") // 用法：2 app.$router.push("page1") .success(res => { console.log("success: ", res) }) .fail(err => { console.log("fail: ", err) }) .complete(_ => { console.log("complete") }) // 用法：3 (传参) app.$router.push("page1", { name: '业务崽' }) // 用法：4 (获取参数) const params = app.$router.params // { name: '业务崽' } ``` # 五、表单校验微信小程序本身是没有提供表单校验功能的，平常用的比较多的是[`WxValidate.js`]([https://github.com/wux-weapp/wx-extend/tree/master/src/assets/plugins/wx-validate]()) 首先我们下载`WxValidate.js`并放置在`utilts`目录下 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/46114448c2c54bf7a0a0c8b28dff3c47~tplv-k3u1fbpfcp-watermark.image?) 在使用到的页面引入`WxValidate` ```js // js import WxValidate from '../utils/WxValidate' ``` 页面加载初始化校验规则 ```js data() { form: { userName: '' } }, onLoad() { // 初始化表单校验规则 this.initValidate() }, initValidate() { const rules = { userName: { required: true } } const messages = { userName: { required: '姓名不能为空' } } this.WxValidate = new WxValidate(rules, messages) }, ``` 提交表单 ```js submit () { if (!this.WxValidate.checkForm(this.data.form)) { wx.showToast({ title: this.WxValidate.errorList[0].msg, mask: true, icon: 'none', duration: 1500 }) return } } ``` # 六、版本更新 ```js App({ onLaunch() { const updateManager = wx.getUpdateManager() updateManager.onCheckForUpdate(res => { if (res.hasUpdate) { wx.showLoading({ title: '版本更新中···', mask: true }) } }) updateManager.onUpdateReady(() => { wx.showModal({ title: '更新提示', content: '新版本已经准备好，是否重启应用？', showCancel: false, success(res) { if (res.confirm) { // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启 updateManager.applyUpdate() } } }) }) updateManager.onUpdateFailed(() => { wx.showToast({ title: '更新失败,请关闭小程序进程，重新打开', icon: 'none', duration: 2000, mask: true }) }) } }) ``` # 七、一键生成骨架屏微信小程序内如何一键生成骨架屏，美观又实用首先，我们写一个这样的原始页面 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c6b9c7b1aa054de9a1a2e5958b270d0e~tplv-k3u1fbpfcp-watermark.image?) 然后，在我们的开发者工具里的模拟器下方找到`···`点击生成骨架屏 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ef762a9b29354cc1916ced16b0d063ce~tplv-k3u1fbpfcp-watermark.image?) 生成骨架屏文件 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/14e6168c8ac849b8a8681a742b40bdd1~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8d9911814653419eaa8fa362f40879cc~tplv-k3u1fbpfcp-watermark.image?) 分别在`wxml`和`wxss`内引入 ```html wxml