注册小程序账号
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
吹逼交流群
来源: http://www.jianshu.com/p/10adade618d8