微信小程序開發實踐：帶你從0到1實現第一個小程序，併發布上線

時間 2020-12-08

標籤 html git github 數據庫 npm json 小程序後端微信小程序 api 欄目 HTML 简体版

原文原文鏈接

前言

對Vue開發有必定了解，對微信小程序比較感興趣，想要理解其開發流程，這篇文章能夠幫助你少踩一些坑，實現併發布本身的第一個微信小程序。

準備工做

登錄微信公衆平臺-小程序：https://mp.weixin.qq.com/cgi-bin/wx，完成申請與註冊，生成一個重要的AppID（小程序惟一身份證:開發→開發設置獲取）。
安裝小程序開發工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html，界面使用類其餘編譯器，點擊上方編譯可在模擬器查看效果，點擊預覽可用手機掃碼查看效果，如圖：
建立第一個小程序項目，填入AppID。選擇雲開發可以使用雲函數、雲數據庫、雲存儲功能，如圖：
小程序詳細開發文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/（遇到問題必定要看文檔！看文檔！看文檔！重要的事情說3遍！！！詳細易懂，少走彎路）

一. 小程序代碼構成

1）文件目錄：

.
├── cloudfunctions # 雲開發函數
│   ├── login //登錄文件夾
│   │     ├── index.js //登錄雲函數
│   │     └──package.json //npm包依賴
│   └── movielist //獲取電影列表文件夾
├── miniprogram #本地開發目錄
│   ├── style //靜態wxss文件
│   ├── fonts //字體圖標文件
│   ├── images //圖片
│   ├── components //存放公共組件庫
│   ├── utils //全局js方法
│   │     └── common.wxs //js處理方法
│   ├── pages //各頁面
│   │     ├── movie //電影列表
│   │     │     ├── movie.js
│   │     │     ├── movie.json
│   │     │     ├── movie.wxml
│   │     │     └── movie.wxss
│   │     └── detail //電影詳情
│   │           ├── detail.js
│   │           ├── detail.json
│   │           ├── detail.wxml
│   │           └── detail.wxss
│   ├── app.js //全局註冊小程序對象
│   ├── app.json //全局配置
│   ├── app.wxss //全局樣式
│   └── package.json //npm配置文件
├── project.config.json #項目配置文件
└── README.md #README

2）.json 後綴的 JSON 配置文件：

app.json全局配置小程序的頁面路由，底部tab，頂部標題等。
page.json頁面配置能夠聲明不一樣於全局的配置，只在該頁面生效，還可引入組件。

pages字段控制當前全部頁面路徑，第一個默認爲首頁；
window字段控制窗口背景顏色，標題等；
tabBar控制分紅幾個tab頁，list數組長度2～5，參數有圖標、字體顏色、頁面路由。html

<!-- app.json -->
//全局配置文件
"pages": [
    "pages/movie/movie",//第一個默認爲首頁
    "pages/profile/profile",
    "pages/detail/detail"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",//下拉背景顏色
    "backgroundTextStyle": "light",//下拉字體樣式
    "navigationBarBackgroundColor": "#00B51D",//窗口頭部背景色
    "navigationBarTitleText": "最新電影",//窗口頭部文案
    "navigationBarTextStyle": "white"//窗口頭部字體顏色
  },
  "tabBar": {
    "color": "#000000",//tab欄默認字體顏色
    "selectedColor": "#E54847",//tab欄選中字體顏色
    "list": [{
      "pagePath": "pages/movie/movie",//tab路徑
      "text": "電影",//tab欄文案
      "iconPath": "images/film.png",//默認圖標路徑
      "selectedIconPath": "images/film-actived.png"//選中圖標路徑
    },{
      "pagePath": "pages/profile/profile",
      "text": "個人",
      "iconPath": "images/profile.png",
      "selectedIconPath": "images/profile-actived.png"
    }]
  },

<!-- detail.json -->
//子頁面配置文件
{
  "usingComponents": {//註冊vant-ui插件
    "van-button": "vant-weapp/button",//按鈕組件
    "van-rate": "vant-weapp/rate",//評分組件
    "van-icon": "vant-weapp/icon"//圖標組件
  },
  "navigationBarBackgroundColor": "#333",//子頁面標題背景色
  "navigationBarTextStyle": "white",//子頁面字體顏色
  "navigationBarTitleText": "電影詳情",//子頁面標題
  "backgroundColor": "#eee",//子頁面下拉刷新背景色
  "backgroundTextStyle": "dark",//子頁面下拉刷新字體色
  "enablePullDownRefresh": true//子頁面下拉刷新
}

3）.wxml 後綴的 WXML 模板文件：

主要控制頁面結構，開發模式爲MVVM可參考Vue，注意以下：git

div,span等標籤換爲了view,text；
微信提供了一些現成組件：輪播圖、日曆、進度條等等，也可以使用UI庫vant-weapp。
在wxml文件中不能使用js方法，需在小程序腳本語言wxs文件中（不容許引入js文件）定義好處理數據的函數，而後在wxml中引入可以使用。

<!-- common.wxs -->
var filter = {
    arrJoin: function(value){ return value.join('/') },
    formatDate: function(value){
        var date = getDate(value) return date.getFullYear() + '年' + date.getMonth() + '月' + date.getDate() + '日'
} }
module.exports={ arrJoin: filter.arrJoin, formatDate: filter.formatDate }

<!-- movie.wxml -->
<wxs module="filter" src="../../utils/common.wxs"></wxs>
<view class="movie" wx:for="{{movieList}}" wx:key="{{index}} wx:for-item="detailList"">
  ...
  <!--調用wxs文件中的數組分割方法-->
  <view>類型：{{filter.arrJoin(detailList.genres)}}</view>
  <!--調用wxs文件中的時間格式化方法-->
  <text class="tag-text">{{filter.formatDate(detailList.created_at)}}</text>
  ...
  <!--使用按鈕和評分組件-->
  <van-rate value="{{detailList.rating.average}}" size="12" void-color="#999" void-icon="star" />
  <van-button icon="like-o" type="primary" size="small">想看</van-button>
  ...
</view>

4）.wxss 後綴的 WXSS 樣式文件：

提供了新的尺寸單位rpx（能夠根據屏幕寬度進行自適應。規定屏幕寬爲750rpx。如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素）。推薦使用iPhone6爲設計稿，單位之間好換算，字體通常用px。github

設備	rpx換算px (屏幕寬度/750)	px換算rpx (750/屏幕寬度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

/* pages/movie/movie.wxss */
@import '../../style/common.wxss'; /* 引入公共樣式 */

.movie{
  height: 420rpx;
  display: flex;
  border-bottom: 1rpx solid #eee;
  padding: 20rpx;
  color: #666;
}
.mv-img{
  height: 100%;
  width: 300rpx;
  margin-right: 20rpx;
}
...

5）.js 後綴的 JS 腳本邏輯文件：

注意事項：數據庫

點擊事件不能在方法中直接傳參數，須要data-id="id"定義，經過e.currentTarget.dataset.id獲取；
給data中數據賦值時需this.setData({id: e.currentTarget.dataset.id})，獲取值方式爲this.data.id。

<!--movie.wxml-->
...
<view class="collect-item" bindtap="gotoDetail" data-movieid="{{item.id}}">
...

<!--movie.js-->
getMovie: function(){//獲取電影列表，從雲函數movielist獲取
    wx.showLoading({//調用微信加載組件
      title: '加載中',
    })
    wx.cloud.callFunction({//請求雲函數
      name: 'movielist',
      data: {
        start: this.data.movieList.length,
        count: 10
      }
    }).then(res=>{
      console.log(JSON.parse(res.result).subjects)
      this.setData({//將返回結果賦值給movieList
        movieList: this.data.movieList.concat(JSON.parse(res.result).subjects)//數組拼接
      })
      wx.hideLoading()//返回結果關閉加載
    }).catch(err=>{
      console.log(err)
      wx.hideLoading()//返回錯誤關閉加載
    })
  },
gotoDetail: function (e) {//跳轉至新頁面
  wx.navigateTo({ 
    url: `../detail/detail?movieid=${e.currentTarget.dataset.movieid}`, 
  }) 
},

2、使用npm安裝第三方插件

右鍵點擊項目在終端打開，執行npm init初始化package.json文件；
執行npm install XX --production；
勾選詳情->本地設置→使用npm模塊；
點擊工具→構建npm，便可在項目中使用；

3、微信原生API

能夠方便的調起微信提供的能力，列舉一些經常使用API：npm

wx.navagateTo：保留當前頁面，跳轉到除了tabbar的其餘頁面，最多打開5個頁面，可返回上一頁；
wx.redirectTo：關閉當前頁面，跳轉到除了tabbar的其餘頁面；
wx.switchTab：跳轉到 tabBar 頁面，並關閉其餘全部非 tabBar 頁面；
wx.showToast：顯示消息提示框，可設置延時消失；
wx.showLoading：顯示 loading 提示框。需主動調用 wx.hideLoading 才能關閉提示框；
wx.request：發起HTTP網絡請求；
wx.chooseImage：從本地相冊選擇圖片或使用相機拍照，視頻/音頻/文件同理；
wx.getLocation：獲取當前的地理位置、速度；
wx.chooseLocation：打開地圖選擇位置，可獲取目標經緯度和詳細地址；
wx.getUserInfo：獲取用戶信息，用戶暱稱、性別、頭像、國家城市、語言等；
wx.getWeRunData：獲取用戶過去30天微信運動步數；
wx.scanCode：調起客戶端掃碼界面進行掃碼；
wx.makePhoneCall：撥打電話；

......json

3、雲開發

1）雲數據庫：

雲開發提供了一個 JSON 數據庫，數據庫中的每條記錄都是一個 JSON 格式的對象。一個數據庫能夠有多個集合（至關於關係型數據中的表），集合可看作一個 JSON 數組，數組中的每一個對象就是一條記錄，記錄的格式是 JSON 對象。支持導入導出。
小程序

// 1. 獲取數據庫引用
// collection 方法獲取一個集合的引用
const db = wx.cloud.database()

//2. 構造查詢語句 
// get 方法會觸發網絡請求，往數據庫取數據
// where 方法傳入一個對象，數據庫返回集合中字段等於指定值的 JSON 文檔。API 也支持高級的查詢條件（好比大於、小於、in 等）
db.collection('movie-collect').where({
   _openid: res.result.openid
   }).get().then(res=>{
   console.log(res)
 }).catch(err=>{
   console.log(err)
 })

// 3. 構造插入語句
// add 方法會觸發網絡請求，往數據庫添加數據
db.collection('user').add({
   data: {
     name: 'ywbj',
     age: 20
   }
 }).then(res => {
   console.log(res)
 }).catch(err => {
   console.log(err)
 })
},

// 4. 構造更新語句
// update 方法會觸發網絡請求，往數據庫更新數據（doc中爲惟一id）
db.collection('user').doc('dc9a49695da03b0f023d6cfd2fa15012').update({
 data: {
   age: 18
 }
 }).then(res => {
   console.log(res)
 }).catch(err => {
   console.log(err)
 })
},

// 5. 構造刪除語句
// delete 方法會觸發網絡請求，使數據庫刪除數據（注意：在小程序中只能刪除單條數據，批量刪除需在雲函數中操做）
db.collection('user').where({
   name: 'ywbj'
 }).remove()
 .then(res => {
   console.log(res)
 }).catch(err => {
   console.log(err)
 })
},

2）雲存儲：

雲開發提供了一塊存儲空間，提供了上傳文件到雲端、帶權限管理的雲端下載能力，開發者能夠在小程序端和雲函數端經過 API 使用雲存儲功能。在小程序端能夠分別調用 wx.cloud.uploadFile 和 wx.cloud.downloadFile 完成上傳和下載雲文件操做。後端

//上傳文件
wx.chooseImage({// 讓用戶選擇一張圖片，生成臨時圖片路徑
  success: chooseResult => { // 將圖片上傳至雲存儲空間
      wx.cloud.uploadFile({ // 指定上傳到的雲路徑
          cloudPath: 'my-photo.png', // 指定要上傳的文件的小程序臨時文件路徑
          filePath: chooseResult.tempFilePaths[0],
          success: res => { 
            console.log('上傳成功，返回文件ID', res.fileID) 
          },
      }) 
   }
})
//下載文件
wx.cloud.downloadFile({
  fileID: '', // 文件 ID
  success: res => { // 返回臨時文件路徑 console.log(res.tempFilePath) },
  fail: console.error
})

3）雲函數：

雲函數是一段運行在雲端的代碼，無需管理服務器，在開發工具內編寫、一鍵上傳部署便可運行後端代碼。可將功能相同的函數封裝並上傳至雲函數統一調用，另外使用雲函數發送請求的好處，不受5個可信域名限制，無需備案。發請求需npm安裝request-promise並引入：https://github.com/request/request-promise。微信小程序

<!--movielist/index.js-->// 雲函數入口文件
const cloud = require('wx-server-sdk')
cloud.init()
var rp = require('request-promise')
// 雲函數入口函數,假設已有一個獲取電影列表的接口
exports.main = async (event, context) => {
 return rp(`http://api.douban.com/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a&start=${event.start}&count=${event.count}`)
 .then(res => {
 return res
 })
}
 
<!--movie.js-->
wx.cloud.callFunction({
 name: 'movielist',
 data: {
   start: this.data.movieList.length,
   count: 10
 }
 })