theme: nico
highlight: zenburn
“ 本文正在参加「金石计划 . 瓜分6万现金大奖」 ”
一、前言
一些微信小程序开发技巧，希望能帮助到大家
二、behaviors （bɪ'heɪvjəz 行为）
先看看官方文档是如何介绍的
behaviors是用于组件间代码共享的特性，类似于一些编程语言中的 “mixins” 或 “traits”。
再看下官方的解释
behavior可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用
这个其实大家可以理解为是一个公共的组件的js文件，这个js文件可以在你的任何组件页面内引用，引入后你的被引用的js文件就拥有了你引入的这个behaviors.js中的一切方法及变量
使用
新建js文件，注册Behavior
module.exports = Behavior({
properties: {},
data: {
name: '业务崽',
age: '18'
},
methods: {
fun1() {
console.log('fun1')
},
fun2() {
console.log('fun2')
}
},
})
页面1引入Behavior
// js
var myBehavior = require('./myBehavior/index.js')
Component({
behaviors: [myBehavior]
})
/** wxml **/
<view>{{ name }}</view>
<button bindtap="fun1">保存</button>
// 业务崽
// fun1
页面2引入Behavior
// js
var myBehavior = require('./myBehavior/index.js')
Component({
behaviors: [myBehavior]
})
/** wxml **/
<view>{{ name }} {{ age }}</view>
<button bindtap="fun2">保存</button>
// 业务崽 18
// fun2
三、页面下拉出现二楼交互
若想在小程序内实现类似淘宝、京东等下拉出现二楼的交互，应该怎么实现？
接到这个需求后尝试了很多方案，因为微信小程序会自带一个下拉刷新的操作，就算不启用下拉刷新，下拉屏幕时也会使屏幕多一截白屏，所以这里给一个最佳解决方案
<swiper vertical="true" current="1" style="height: 100vh">
<swiper-item style="height: 100vh">
二楼下拉内容
</swiper-item>
<swiper-item style="height: 100vh">
页面内容
</swiper-item>
</swiper>
可使用swiper自带方法监听滑动距离，添加自定义交互效果
Tips: 如果遇到
swiper过大导致页面无法下拉，包一层scroll-view即可解决
<swiper-item>
<scroll-view scroll-y="true" style="height: 100vh;">
</scroll-view>
</swiper-item>
四、router
微信小程序若要进行页面跳转只能使用微信小程序的跳转方法，例如：wx.navigateTo、wx.redirectTo、wx.switchTab等…
那要是想使用router来进行路由操作，应该如何实现呢？
实现
根目录创建router文件夹
可根据业务、分包不同将页面路由进行单文件管理，这里用page1、page2代替
page1.js
export default [
{
name: 'page1',
title: '页面1',
url: 'pages/page1/index'
}
]
page2.js
export default [
{
name: 'page2',
title: '页面2',
url: 'pages/page2/index'
}
]
pages.js
import page1 from './page1'
import page2 from './page2'
export default [
...page1,
...page2
]
index.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 属性
import MiniRouter from '/router/index'
App({
onLaunch () {
this.$router = new MiniRouter()
}
})
Tips: 用
router定义了路由后，不是说app.json里就不用注册了，app.json里同样需注册路由
使用
// 需要在使用的页面先获取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
首先我们下载WxValidate.js并放置在utilts目录下
在使用到的页面引入WxValidate
// js
import WxValidate from '../utils/WxValidate'
页面加载初始化校验规则
data() {
form: {
userName: ''
}
},
onLoad() {
// 初始化表单校验规则
this.initValidate()
},
initValidate() {
const rules = {
userName: { required: true }
}
const messages = {
userName: { required: '姓名不能为空' }
}
this.WxValidate = new WxValidate(rules, messages)
},
提交表单
submit () {
if (!this.WxValidate.checkForm(this.data.form)) {
wx.showToast({
title: this.WxValidate.errorList[0].msg,
mask: true,
icon: 'none',
duration: 1500
})
return
}
}
六、版本更新
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
})
})
}
})
七、一键生成骨架屏
微信小程序内如何一键生成骨架屏，美观又实用
首先，我们写一个这样的原始页面
然后，在我们的开发者工具里的模拟器下方找到···点击生成骨架屏
生成骨架屏文件
分别在wxml和wxss内引入
wxml
<import src="index.skeleton.wxml" />
<template is="skeleton" wx-if="{{ showSkeleton }}" />
wxss
@import "index.skeleton.wxss";
需用template模板引入骨架屏，并使用wx-if进行控制。页面加载时默认true，拿到数据后赋值为false关闭骨架屏
Tips: 可在生成的
wxss内自行修改骨架屏样式
八、微信小程序使用less
首先第一步，在vsCode内下载安装Easy LESS
其次我们打开编辑器扩展面板，点击···
选择从已解包的扩展文件夹安装
找到我们刚在vsCode内安装的Easy LESS，选择并导入
导入成功后，微信小程序会自动重启，到这一步 安装就已经成功了。但我们还需要去设置一下Easy LESS的输出文件，因为默认会生成.css文件，我们需将其设置为.wxss
在我们已安装的插件内找到Easy LESS并点击小齿轮图标
在弹开的小窗口内找到Extension Settings选项并点击
点击并打开settings.json
添加如下代码，保存重启开发者工具即可完成设置
// settings.json
"less.compile": {
"outExt": ".wxss"
},
九、独立分包
先来看看官方解释
独立分包是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行
最主要的特性其实就是，可独立于主包和其他分包运行。这样在业务层如果有可单独运行的业务模块，即可采用独立分包的形式
优点：不用加载主包及其它分包的内容，大幅度提升页面的启动速度
缺点：独立分包不能依赖主包和其他分包中的内容，并且主包中的 app.wxss 对独立分包无效
使用
在app.json的subpackages字段中对应的分包配置项中定义independent字段
{
"pages": [
"pages/index",
"pages/logs"
],
"subpackages": [
{
"root": "moduleA",
"pages": [
"pages/rabbit",
"pages/squirrel"
]
}, {
"root": "moduleB",
"pages": [
"pages/pear",
"pages/pineapple"
],
"independent": true
}
]
}
十、page-container
我们在写业务时经常会遇到在当前页面打开一个全屏子页面的需求，如果按照正常的方式去写全屏子页面,用户在进行返回操作时会直接离开当前页面，而不是关闭当前打开的全屏子页面。
这时我们就可以采用page-container，去模拟一个页面容器，将我们的全屏子页面放在这个页面容器内。这样我们在进行返回操作时就只会关闭当前的这个页面容器，而不会直接离开当前页面
使用
<page-container show="{{ show }}">
<page1 />
</page-container>
Tips: 一个页面内只能存在一个
page-container，但我们可以通过wx-if的方式去控制
十一、副文本
<view>
<rich-text nodes="{{content}}"></rich-text>
</view>
暂无评论内容