小程序開發

註冊小程序帳號

安裝開發者工具
開發者工具下載地址：微信開發者工具

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