注册小程序账号
安装开发者工具
开发者工具下载地址：微信开发者工具
WeUI 有两个版本，一个是普通的 HTML5 版本，另外是小程序版本。
[
.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件
自定义组件
插件
bind 不会阻止冒泡
catch 会阻止事件继续冒泡
捕获是先于冒泡的触发
在下面的代码中，点击 inner view 会先后调用 handleTap2、handleTap4、handleTap3、handleTap1。
如果将上面代码中的第一个 capture-bind 改为 capture-catch，将只触发 handleTap2
<view class="life-style">
<view class="item" wx:for="{{lifeStyle}}" data-name="{{item.name}}" data-detail="{{item.detail}}" bindtap="indexDetail">
<view class="title">
<icon type="{{item.icon}}"></icon>
{{item.name}}
</view>
<view class="content">{{item.info}}</view>
</view>
</view>
// weather/index.js
// 响应事件的处理函数
indexDetail(e) {
const {name, detail} = e.currentTarget.dataset
wx.showModal({
title: name,
content: detail,
showCancel: false
})
}
路由
<navigator url="跳转页面URL" >跳转到新页面</navigator>
<view bindtap="gotoUrl">跳转页面</view>
Page({
gotoUrl(){
let url = 'pages/another/url'
wx.navigateTo({
url
})
}
})
flex 布局
小程序·云开发提供数据库、云函数和静态存储三大功能
需要先调用 wx.cloud.init 对云开发进行初始化：
wx.cloud.init({
env: 'tianqi-xxx'
})
需要传入 env 参数，该参数为创建小程序·云开发时的环境 ID
// 初始化
wx.cloud.init({
env: 'tianqi-xxx'
})
// 获取数据库实例
const db = wx.cloud.database()
// 增
db.collection('集合名称').add({
data: {} // 插入的数据
}).then(res => {
// 可以通过 res._id 获取创建的记录的 id
console.log(res._id)
})
// 删
db.collection('集合名称').doc('文档 ID').remove().then(res => {
console.log('removed')
})
// 改
db.collection('集合名称').doc('文档 ID').update({
data: {
title: '我的第 1 篇文章', // 只更新 title 字段，其他不更新
}
}).then(res => {
// 可以通过 res._id 获取创建的记录的 id
console.log(res._id)
})
// 查
db.collection('集合名称').doc('文档 ID').get().then(res => {
// 打印结果，res.data 即为记录的数据
console.log(res)
})
const _ = db.command // 取指令
db.collection('集合名称').where({
// 查找条件
category: 'computer',
properties: {
memory: _.gt(8), // 表示大于 8
}
})
// 上传，上传后会返回资源的 ID
wx.cloud.uploadFile
// 下载
wx.cloud.downloadFile
// 根据资源 ID 获取资源访问地址
wx.cloud.getTempFileURL
// 根据资源 ID 列表删除某资源
wx.cloud.removeFile
具有扎实的前端语言基础，良好的ES6基础
有完整的微信小程序项目经验
熟悉掌握至少一种前端框架
熟悉GIT
小程序架构解密
小程序生命周期
小程序生命周期包括应用的生命周期（逻辑层 App Service）和页面的生命周期（视图层 View），两者支持的事件不同，详见官方文档中的这张配图。
Gulp 和 webpack
Gulp 来搭建小程序开发环境
Gulp构建的微信小程序开发
全局安装gulp-cli
$ npm install --global gulp-cli
import wepy from 'wepy';
// 通过继承自wepy.page的类创建页面逻辑
export default class Index extends wepy.page {
//可用于页面模板绑定的数据
data = {
motto: 'Hello World',
userInfo: {}
};
//事件处理函数(集中保存在methods对象中)
methods = {
bindViewTap () {
console.log('button clicked');
}
};
//页面的生命周期函数
onLoad () {
console.log('onLoad');
};
}
基于gulp+less构建的微信小程序工程项目
项目图片自动压缩
ESLint代码检查
使用命令行快速创建page、template和component
Tasks:
dev 开发编译，同时监听文件变化
build 整体编译
clean 清空产出目录
wxml 编译wxml文件（仅仅copy）
js 编译js文件，同时进行ESLint语法检查
json 编译json文件（仅仅copy）
wxss 编译less文件为wxss
img 编译压缩图片文件
watch 监听开发文件变化
auto 自动根据模板创建page,template或者component(小程序自定义组件)
gulp auto
选项：
-s, --src copy的模板 [字符串] [默认值: "_template"]
-p, --page 生成的page名称 [字符串]
-t, --template 生成的template名称 [字符串]
-c, --component 生成的component名称 [字符串]
--msg 显示帮助信息 [布尔]
示例：
gulp auto -p mypage 创建名为mypage的page文件
gulp auto -t mytpl 创建名为mytpl的template文件
gulp auto -c mycomponent 创建名为mycomponent的component文件
gulp auto -s index -p mypage 复制pages/index中的文件创建名称为mypage的页面
请点赞！因为你的鼓励是我写作的最大动力！
吹逼交流群：711613774