微信小程序開發入門教程（一）---hello world

由於無法備案網站，前期做了個微信小程序（開發版）就擱置了，幾乎忘了開發過程。現在重新梳理，做個記錄。

一、最基本的小程序前端例子hello

1、下載安裝  微信開發者工具  官網： https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html  

2、運行后首先提示掃碼，在手機上確認登錄（我以前注冊過微信公眾平台，如果你未注冊過的話，可能需要先去注冊）。登錄后，頁面顯示了我之前做的幾個小程序項目。排第一個的是一個加號（+），用來新建項目。

3、點上步的加號（+），新建項目名稱寫的是：hello  ； 目錄 我設的是：E:\wxDEV\hello；AppId 我點選的是：測試號；開發模式：小程序；后端服務：默認不使用雲服務；語言：javascript ; 然后點：新建

4、在 微信開發者工具 界面上，點三個橫點（…）彈出E:\wxDEV\hello硬盤目錄，里面就是小程序前端代碼了。點預覽（眼睛形狀）圖標，會彈出二維碼，用手機掃碼后，可以在手機上測試使用小程序了。（在手機微信中的微信頁面，向下滑動，會出現最近使用過的小程序）

5、但那些代碼表示什么呢？手冊在：https://developers.weixin.qq.com/miniprogram/dev/framework/  下面分析一下E:\wxDEV\hello中的代碼文件

5.1、sitemap.json  文件中有個鏈接：https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html；看了一下，是控制微信爬蟲，即是否允許頁面內容被用戶搜索到

5.2、project.config.json  項目配置文件:https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html   如：可以設置為小程序插件項目。

5.3、app.wxss    https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html 相當於CSS樣式表文件。

5.4、app.json  https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE  小程序配置，又分為全局配置和頁面配置。如：有哪些頁面，頁面標題、顏色等

5.5、app.js https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html 注冊小程序APP實例，大概相當於程序入口的main函數吧。

6、目錄utils下有util.js 大概是引入外部 js文件；參考：https://www.cnblogs.com/wangting888/p/9701658.html

7、目錄pages下有兩個目錄，index和logs,每個目錄表示一個小程序頁面。其中，后綴為.wxml的相當於html頁面，其它類似前面介紹的，分別是樣式表、配置和js代碼文件。參考：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/

二、只有前端是不夠的，沒條件搭服務器怎么辦？好在微信開發者工具提供了強大的雲開發能力，參考上面步驟，新建項目helloyun（雲端是node.js語言）

1、參考上面第3步新建小程序項目，項目名稱：helloyun  ;  目錄：E:\wxDEV\helloyun ; AppID:只能選擇自己注冊的AppID,測試號無法雲開發；開發模式：小程序；后端服務：小程序雲開發；然后點 新建。雲開發的例子已生成。可以點預覽，並在手機上查看了。手機上小程序本身就相當於教程，其中介紹了兩種操作雲端數據庫（或函數、調用）的辦法：一是前端操作數據庫；二是在cloudfunctions目錄中新建雲函數，使用wx-derver-sdk

參考：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html

2、雲開發項目的目錄看似更簡潔，E:\wxDEV\helloyun目錄結構如下：

－－cloudfunctions（目錄）

－－miniprogram（目錄）

－project.config.json

－README.md

3、miniprogram對應的小程序前端（與本文第一部分類似），對應雲端的是cloudfunctions目錄（2019年8月8日生成的雲開發項目，與以前用舊版開發工具生成的目錄結構不一樣了），新版的 E:\wxDEV\helloyun\cloudfunctions 目錄下有4個目錄：

－callback

－echo

－login

－openapi

4、先從手機的雲開發QuickStart入手，點上傳圖片，然后拍照上傳。根據上傳后的提示，打開開發者工具，點雲開發，進入雲開發控制台（確認你是否已開通了雲開發功能），在 存儲 下，可以看到剛上傳的my-image.jpg。

我們還是從前端入手分析，在開發者工具中， 查看E:\wxDEV\helloyun\miniprogram\pages\index\index.wxml  的代碼。找到 上傳圖片 字樣。對應的bindtap是

doUpload。在同目錄的E:\wxDEV\helloyun\miniprogram\pages\index\index.js 中，找到doUpload，可看出上傳照片最主要的是用wx.chooseImage和

wx.cloud.uploadFile。

5、多次拍照上傳，會發現上傳照片會被覆蓋，於是在上一步的doUpload函數中加個隨機數，由原來的：

const cloudPath = 'my-image' + filePath.match(/\.[^.]+?$/)[0]  改為：

const cloudPath = 'my-image'+ Math.random() + filePath.match(/\.[^.]+?$/)[0]   

然后上傳的圖片就不會被覆蓋了。

我們還可以在雲存儲中新建目錄 如：goods   然后將代碼改為：

const cloudPath = 'goods/my-image' + Math.random() + filePath.match(/\.[^.]+?$/)[0]  ，

編譯，預覽，你會發現圖片上傳到了雲存在的goods目錄下。

6、上手雲數據庫  https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/getting-started.html

在  雲開發控制台 的  數據庫  中創建  goods 集合名稱。設置權限為所有人可讀。

為了方便測試，在E:\wxDEV\helloyun\miniprogram\pages\index\index.wxml 的最后一個</view>之前，加以下代碼

<view class="uploader">
<button class="uploader-text" bindtap="mydbadd">數據庫add</button>
</view>

同時，在E:\wxDEV\helloyun\miniprogram\pages\index\index.js的最后一個})之前，加以下代碼（也就是E:\wxDEV\helloyun\miniprogram\pages\databaseGuide\databaseGuide.js中的代碼）

//my測試數據庫add
  mydbadd: function() {
    const db = wx.cloud.database()
    db.collection('goods').add({
      data: {
        count: 1
      },
      success: res => {
        // 在返回結果中會包含新創建的記錄的 _id
        this.setData({
          counterId: res._id,
          count: 1
        })
        wx.showToast({
          title: '新增記錄成功',
        })
        console.log('[數據庫] [新增記錄] 成功，記錄 _id: ', res._id)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '新增記錄失敗'
        })
        console.error('[數據庫] [新增記錄] 失敗：', err)
      }
    })
  },

編譯，點擊  數據庫add按鈕  后，會看到后台數據庫中新增了一條記錄（確保已在后台數據庫中設置了goods集合）。開發者工具 控制台console中也有相應的提示。

7、上手雲函數  https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions/getting-started.html

在開發者工具中的 cloudfunctions目錄 點鼠標右鍵，可以新建、上傳、同步雲函數（也可直接在）。從雲開發控制台中可以看到我以前寫的幾個雲函數，忘了是干什么用的，可以同步到本地查看。同步下來后，在開發者工具中的相應目錄圖標會變成一朵雲。

在項目根目錄找到  project.config.json 文件，可以看到已經有了 cloudfunctionRoot 字段（如果沒有，就按官方教程增加）

然后在開發者工具中的 cloudfunctions目錄 點鼠標右鍵，增加名為sum的雲函數，會在 cloudfunctions目錄下生成sum目錄及E:\wxDEV\helloyun\cloudfunctions\sum\index.js

讓我們在index.js中的返回值中增加一句： sum : event.a + event.b，即，將index.js的代碼修改如下：

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

cloud.init()

// 雲函數入口函數
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
    sum: event.a + event.b,
  }
}

為了省事，我直接修改了上面第6步的    mydbadd函數代碼

//my測試數據庫add
  mydbadd: function() {
    const db = wx.cloud.database()
    db.collection('goods').add({
      data: {
        count: 1
      },
      success: res => {
        // 在返回結果中會包含新創建的記錄的 _id
        this.setData({
          counterId: res._id,
          count: 1
        })
        wx.showToast({
          title: '新增記錄成功',
        })
        console.log('[數據庫] [新增記錄] 成功，記錄 _id: ', res._id)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '新增記錄失敗'
        })
        console.error('[數據庫] [新增記錄] 失敗：', err)
      }
    })
    wx.cloud.callFunction({
      // 雲函數名稱
      name: 'sum',
      // 傳給雲函數的參數
      data: {
        a: 1,
        b: 2,
      },
    })
      .then(res => {
        console.log(res.result) // 3
      })
      .catch(console.error)
  },

這樣，在增加數據庫數據的同時，就會調用雲函數，並在開發者工具的console中顯示調用結果。

 

 

 

參考：

Js文件函數中調用另一個Js文件函數的方法， https://www.cnblogs.com/cxx8181602/p/9340678.html

JS 時間格式化函數  https://www.cnblogs.com/henw/archive/2011/10/17/2215545.html

js生成隨機數  https://www.cnblogs.com/wenxuehai/p/10285585.html