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

因爲沒法備案網站，前期作了個微信小程序（開發版）就擱置了，幾乎忘了開發過程。如今從新梳理，作個記錄。

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

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

二、運行後首先提示掃碼，在手機上確認登陸（我之前註冊過微信公衆平臺，若是你未註冊過的話，可能須要先去註冊）。登陸後，頁面顯示了我以前作的幾個小程序項目。排第一個的是一個加號（+），用來新建項目。

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

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

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

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

5.二、project.config.json  項目配置文件:https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html   如：能夠設置爲小程序插件項目。

5.三、app.wxss    https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html 至關於CSS樣式表文件。

5.四、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.五、app.js https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html 註冊小程序APP實例，大概至關於程序入口的main函數吧。

六、目錄utils下有util.js 大概是引入外部 js文件；參考：http://www.javashuo.com/article/p-yoffisqw-r.html

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

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

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

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

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

－－cloudfunctions（目錄）

－－miniprogram（目錄）

－project.config.json

－README.md

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

－callback

－echo

－login

－openapi

四、先從手機的雲開發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。

五、屢次拍照上傳，會發現上傳照片會被覆蓋，因而在上一步的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目錄下。

六、上手雲數據庫  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中也有相應的提示。

七、上手雲函數  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文件函數的方法， http://www.javashuo.com/article/p-gqniosmr-bd.html

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

js生成隨機數  http://www.javashuo.com/article/p-ymdcaomv-bk.html