wepy
小程序最早的框架之一，是一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。
项目结构(主要)
- dist：编译后的代码(可直接运行于微信开发者工具)
- wepy.config.js：打包配置文件
- jsconfig.json：js个性化配置
- jest.config.js：单元测试配置
- .gitignore：git配置文件
- src：项目根目录
- pages：页面
- components：公共组件
- mixins：全局混入
- assets：静态资源
- images：图片资源
- iconfont：字体图标
- styles：公共样式资源
- wxs：wxml文件功能增强
- utils：通用方法
- config.js：项目配置文件
iconfont
由于小程序自身受大小限制，除了合理分包外，引入iconfont，以减少图标图片的引入。
wxs
wxml文件只可以处理一些简单逻辑，无法处理复杂逻辑，例如：数据格式化
时间戳转日期：1624338122299 => '2021/06/24'
优点：在不改变原有数据下，展示格式化后的数据。避免一字段，多变量问题
缺点：不支持ES6语法，某些写法有差别，请参照wxs语法
const formatTime = function (timestamp) {
return new Date(timestamp).toLocaleDateString()
}
module.exports = {
formatTime: formatTime,
};
// 引入
import tool from './comm.wxs'
wxs = {
tool : tool
};
const todos = [
{ name: 'work', time: 1624338122299 },
{ name: 'eat', time: 1624338122190},
{ name: 'sleep', time: 162433819999},
]
<view wx:for="todos" wx:key="name">{{tools.formatTime(item.time)}}</view>
环境变量控制
通常我们拥有多套访问地址，如：开发(内网)环境、测试(外网)环境、生产环境。
现有：访问不同环境时，手动修改ENV变量
const ENV = 'dev'
const configMap = {
dev: {
removeImgUrl：'xxxx',
baseUrl: 'xxxx'
},
uat: {
removeImgUrl：'xxxx',
baseUrl: 'xxxx'
},
prod: {
removeImgUrl：'xxxx',
baseUrl: 'xxxx'
}
}
const config = configMap[ENV]
module.exports = config;
优化：依赖package.json运行的script命令，从而构建指定环境变量下的dist文件
- npm依赖
- cross-env：设置环境变量，兼容mac/windows
- babel-plugin-global-define：设置全局变量
// package.json
"script": {
"dev": "wepy build --no-cache --watch -s src -t dist",
"set-env:dev": "cross-env NODE_ENV=dev && npm run dev",
"set-env:uat": "cross-env NODE_ENV=uat && npm run dev",
}
// wepy.config.js
const ENV = process.env.NODE_ENV || dev
plugins: [
[ 'global-define', {
NODE_ENV: ENV
}]
]
// config.js
const ENV = NODE_ENV || 'dev'
第三方组件(minui)
minui提供自己的组安装方式，直接将ui组件安装到dist目录下，而dist目录在git上传时，被忽略掉，所以多分支开发时，会出现依赖丢失。
优化方案：
- 修改.gitignore文件配置
- 新建packages文件夹，通过增加script命令，编译前copy文件夹
// .gitignore文件 git上传时，忽略除dist/packages所有文件夹/文件
dist/*
!dist/packages
"script": {
"dev": "npm run copy-packages && wepy build --no-cache --watch -s src -t dist",
"copy-packages": "cp -rvf src/packages dist",
}
wepy文件常见属性
- data：数据
- methods: 绑定在标签元素上的方法
- events: 声明组件之间的事件处理函数，例如：自组件调用父组件：this.$emit('xxx',...args)
- computed: 计算属性(用法同vue)
- watch: 监听属性(用法同vue)
- config: 页面配置
- components: 组件注册(用法同vue)
常用生命周期@1.0|@2.0(按照调用执行顺序)
- onLaunch：小程序初始化
- onLoad：页面加载
- onShow：页面显示
- onReady：页面首次渲染完成
- onHide：页面隐藏
- onUnload：页面卸载
开发中遇到的一些问题
- 自定义组件中引入minui组件，无法调用minui组件methods的方法
在自定义组件中，无法通过this.$wxpage.selectComponent() 获取组件实例
但是在页面中引入minui组件可以通过this.$wxpage.selectComponent() 获取到组件实例
- 滚动穿透问题
通过设置page的overflow属性，来阻止滚动。弹层内有输入框，键盘弹起时，按住输入框滚动依然会滚动穿透
const overflow = status ? 'hidden' : 'auto'
wx.setPageStyle({
style: {
overflow: overflow
},
fail(e) {
console.log(e)
}
})
- 同一页面，组件多次复用，导致props共享问题
在注册时，同一组件定义多个组件名
import Button from './button'
components = {
ComA: Button,
ComB: Button
};
- 自定义组件循环
使用repeat标签进行包裹
<repeat for="{{list}}" key="index" index="index" item="item">
<Child :item="item"></Child>
</repeat>
