小程序开发
2019-07-10 本文已影响25人
魔王哪吒
注册小程序账号
image.png
image.png
安装开发者工具
开发者工具下载地址：微信开发者工具
WeUI 有两个版本，一个是普通的 HTML5 版本，另外是小程序版本。
[
image.png
image.png
.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件
image.png
自定义组件
image.png
插件
image.png
image.png
image.png
image.png
bind 不会阻止冒泡
catch 会阻止事件继续冒泡
捕获是先于冒泡的触发
在下面的代码中，点击 inner view 会先后调用 handleTap2、handleTap4、handleTap3、handleTap1。
image.png
如果将上面代码中的第一个 capture-bind 改为 capture-catch，将只触发 handleTap2
image.png
<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
})
}
image.png
image.png
image.png
路由
<navigator url="跳转页面URL" >跳转到新页面</navigator>
<view bindtap="gotoUrl">跳转页面</view>
Page({
gotoUrl(){
let url = 'pages/another/url'
wx.navigateTo({
url
})
}
})
flex 布局
小程序·云开发提供数据库、云函数和静态存储三大功能
image.png
需要先调用 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
}
})
image.png
// 上传，上传后会返回资源的 ID
wx.cloud.uploadFile
// 下载
wx.cloud.downloadFile
// 根据资源 ID 获取资源访问地址
wx.cloud.getTempFileURL
// 根据资源 ID 列表删除某资源
wx.cloud.removeFile
image.png
具有扎实的前端语言基础，良好的ES6基础
有完整的微信小程序项目经验
熟悉掌握至少一种前端框架
熟悉GIT
小程序架构解密
image.png
image.png
小程序生命周期
小程序生命周期包括应用的生命周期（逻辑层 App Service）和页面的生命周期（视图层 View），两者支持的事件不同，详见官方文档中的这张配图。
image.png
image.png
image.png
Gulp 和 webpack
Gulp 来搭建小程序开发环境
image.png
image.png
image.png
image.png
image.png
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');
};
}
image.png
基于gulp+less构建的微信小程序工程项目
项目图片自动压缩
ESLint代码检查
使用命令行快速创建page、template和component
image.png
image.png
image.png
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
吹逼交流群
