微信小程式開發實踐

資源

視訊

https://www.imooc.com/learn/1121

賬号注冊

https://mp.weixin.qq.com/wxopen/waregister?action=step1

開發工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

開發文檔

https://developers.weixin.qq.com/miniprogram/dev/framework/

1、項目檔案

1. json 配置
2. wxml 模闆
3. wxss 樣式
4. js 腳本邏輯

2、json 配置

project.config.json 項目配置

app.json 全局配置

page.json 頁面配置

3、wxml 模闆

标簽：view

資料綁定：

動态資料 page.data

Mustache 文法

變量：{{key}}

循環：wx:for

條件：wx:if

eg:

// pages/index/index.js

Page({
  /**
   * 頁面的初始資料
   */
  data: {
    name: "Tom",
    arr: ["cat", "dog"],
    isLogin: true,
  },
});      

<!--pages/index/index.wxml-->

<!-- 變量 -->
<view>{{name}}</view>

<!-- 清單 -->
<view wx:for="{{arr}}" wx:key="{{index}}">
  {{index}} {{item}}
</view>

<!-- 條件 -->
<view wx:if="{{isLogin}}">已登入</view>
<view wx:else>請登入</view>      

4、wxss 樣式

responsive pixel 寬度以 750rpx 為标準， 以 iphone6 螢幕為測試标準

/* pages/index/index.wxss */
@import "../../style/guide.wxss";

.box {
  width: 200rpx;
  height: 200rpx;
  background-color: #eeeeee;
}      

第三方樣式庫

1. weui
2. iview weapp
3. vant weapp

5、js 腳本邏輯

<!--pages/index/index.wxml-->
<view>{{count}}</view>
<button bindtap="handleButtonTap" data-id="666" size="mini">點選</button>      

// pages/index/index.js

Page({
  handleButtonTap: function (event) {
    console.log(event);

    // 更新資料
    this.setData({
      count: this.data.count + 1,
    });
  },
});      

雲開發

1. 雲函數

• 擷取 appid
• 擷取 openid
• 生成分享圖
• 調用騰訊雲 SDK

1. 雲資料庫

• 資料增删改查

1. 雲存儲

• 管理檔案
• 上傳檔案
• 下載下傳檔案
• 分享檔案

Serverless

MongoBD

權限管理

示例：

// /pages/about/about.js

// 初始化雲資料庫
const db = wx.cloud.database();

// 添加資料
handleInsert: function(){
  db.collection('data').add({
    data: {
      name: 'Tom'
    }
  }).then(res=>{
    console.log(res)
  }).catch(err=>{
    console.log(err)
  })
},

// 更新資料
handleUpdate: function () {
  db.collection('data').doc('a9bfcffc5eb78e810058cf6f4b4a03c5').update({
    data: {
      age: 20
    }
  }).then(res => {
    console.log(res)
  }).catch(err => {
    console.log(err)
  })
},

// 查找資料
handleFind: function () {
  db.collection('data').where({
    name: 'Tom'
  }).get().then(res => {
    console.log(res)
  }).catch(err => {
    console.log(err)
  })
},

// 移除資料
handleRemove: function () {
  db.collection('data').doc('a9bfcffc5eb78e810058cf6f4b4a03c5').remove().then(res => {
    console.log(res)
  }).catch(err => {
    console.log(err)
  })
},      

開發環境需要安裝Node.js

node -v
v10.16.0      

如果提示沒有安裝

npm install --save wx-server-sdk@latest      

雲函數求和

// cloudfunctions/sum/index.js

// 雲函數 求和
exports.main = async (event, context) => {
  return event.a + event.b;
}
      

// /pages/about/about.js

handleCallFunc: function() {
    wx.cloud.callFunction({
      name: 'sum',
      data: {
        a: 2,
        b: 3
      }
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  },      

擷取openid

// /pages/about/about.js

handleLoing: function(){
    wx.cloud.callFunction({
      name: 'login'
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  }      

批量删除

// cloudfunctions/batchDelete/index.js

// 雲函數入口檔案
const cloud = require('wx-server-sdk')

cloud.init()

const db = cloud.database()

// 雲函數入口函數
exports.main = async (event, context) => {
  return await db.collection('data').where({
    name: 'Tom'
  }).remove()
}      

// /pages/about/about.js

handleBatchDelete: function () {
    wx.cloud.callFunction({
      name: 'batchDelete'
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  },      

圖檔上傳

handleUploadFile: function(){
    // 選擇圖檔
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        // tempFilePath可以作為img标簽的src屬性顯示圖檔
        const tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths)

        // 上傳圖檔
        wx.cloud.uploadFile({
          // 上傳至雲端的路徑
          cloudPath: new Date().getTime() + '.png', 
          filePath: tempFilePaths[0], // 小程式臨時檔案路徑
          success: res => {
            // 傳回檔案 ID
            const fileID = res.fileID

            // 存儲檔案路徑
            db.collection('files').add({
              data:{
                fileID: fileID
              }
            }).then(res=>{
              console.log(res)
            }).catch(err=>{
              console.log(err)
            })
          },
          fail: console.error
        })
        
      }
    })
  }      

圖檔顯示和下載下傳

<block wx:for="{{images}}" wx:key="index">
  <image src="{{item.fileID}}"></image>
  <view>
    <button data-fileid="{{item.fileID}}" bindtap="handleDownloadFile">下載下傳圖檔</button>
  </view>
</block>      

// pages/about/about.js

// 初始化雲資料庫
const db = wx.cloud.database();

Page({
  data: {
    images: []
  },

 getFileList: function() {
    // 擷取圖檔清單
    wx.cloud.callFunction({
      name: 'login',
    }).then(res => {
      db.collection('files').where({
        _openid: res.result.openid
      }).get().then(res => {
        console.log(res)

        this.setData({
          images: res.data
        })

      })
    })
  },

  handleDownloadFile: function(event) {
    // 下載下傳檔案
    console.log(event.target.dataset.fileid)

    wx.cloud.downloadFile({
      fileID: event.target.dataset.fileid, // 檔案 ID
      success: res => {
        // 傳回臨時檔案路徑
        console.log(res.tempFilePath)
        
        // 儲存圖檔到相冊
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) { 
            wx.showToast({
              title: '儲存成功',
            })
          }
        })
      },
      fail: console.error
    })
    
  }
})      

電影評分示例

引入Vant Weapp

參考

https://youzan.github.io/vant-weapp/#/quickstart

在 miniprogram 目錄下

npm i @vant/weapp -S --production      

工具設定

工具 -> 建構 npm

詳情 -> 勾選 使用 npm 子產品

發送請求

小程式端 需要icp備案

雲函數 無需備案

request庫

豆瓣電影

電影清單API：

http://api.douban.com/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a&start=0&count=10`

代碼位址：

https://github.com/mouday/weixin-app-demo