小程序开发

注册小程序帐号

安装开发者工具
开发者工具下载地址：微信开发者工具

WeUI 有两个版本，一个是普通的 HTML5 版本，另外是小程序版本。

[

.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件

自定义组件

插件

bind 不会阻止冒泡
catch 会阻止事件继续冒泡

捕获是先于冒泡的触发

在下面的代码中，点击 inner view 会前后调用 handleTap二、handleTap四、handleTap三、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