【小程序 + 雲開發】體重記錄小程序 上手筆記

剛剛提交的小程序審覈經過了，把筆記發出來。 前一段看到朋友圈裏老是有人用txt記錄體重，就特別想寫一個記錄體重的小程序， 如今小程序的雲開發有云函數、數據庫，真的挺好用，很適合我的開發者，服務器域名什麼都不用管，雲開發讓你徹底不用操心這些東西。

先看看頁面效果圖吧：

記錄的幾個點：

1. 全局變量 globalData
2. npm 的使用
3. 雲函數
4. 數據庫操做
5. async 的使用
6. 分享的配置
7. antV使用
8. tabBar地址跳轉
9. 切換頁面刷新

1.全局變量 globalData

首次進入後，要存儲openId給其餘頁面使用，使用globalData共享。

<!--app.js 設置 globalData.openid --> 
App({
  onLaunch: function () {

    this.globalData = {}

    wx.cloud.init({})

    wx.cloud.callFunction({
      name: 'login',
      data: {},
      success: res => {
        this.globalData.openid = res.result.openid
        wx.switchTab({
          url: '/pages/add/add',
          fail: function(e) {}
        })
      }, 
      fail: err => { 
     
      }
    })

  }
})

<!--其餘頁面引用-->
const app = getApp()  // 得到實例
app.globalData.openid // 直接引用便可
複製代碼

2.npm 的使用

1. 進入小程序源碼miniprogram目錄，建立package.json文件（使用npm init一路回車）
2. npm i --save 咱們要安裝的npm包
3. 設置微信開發者工具 構建npm
4. package.json增長"miniprogram": "dist"打包目錄字段，若是不設置的話上傳和預覽不成功，提示文件包過大。

cd miniprogram
npm init 
npm i @antv/f2-canvas --save   // 我用到了f2，能夠換成其餘包
複製代碼

設置微信開發者工具

構建 npm

最後，務必添加miniprogram字段

{
  "name": "21Day",
  "version": "1.1.0",
  "miniprogram": "dist",
  "description": "一個21天體重記錄的app",
  "license": "MIT",
  "dependencies": {
    "@antv/f2-canvas": "~1.0.5",
    "@antv/wx-f2": "~1.1.4"
  },
  "devDependencies": {}
}
複製代碼

3.雲函數

官方解釋雲函數即在雲端（服務器端）運行的函數，服務端是node.js，都是JavaScript。官方有數據庫的操做，可是更新的操做強制要求使用雲函數, 另外，若是雲函數中使用了npm包，記得在所在雲函數文件夾右鍵上傳並部署，否則運行失敗。

上一個例子，更新體重的雲函數

// 雲函數
const cloud = require('wx-server-sdk')
const moment = require('moment')

cloud.init(
  { traceUser: true }
)

const db = cloud.database()
const wxContext = cloud.getWXContext()

exports.main = async (event, context) => {
  // event 入參參數
  delete event.userInfo
  try {
    return await db.collection('list').where({
      _openid:wxContext.OPENID,
      date:moment().format('YYYY-MM-DD')
    })
    .update({
      data: {
      	...event
      },
    })
  } catch(e) {
    console.error(e)
  }
}
複製代碼

小程序端調用

wx.cloud.callFunction({
     name: 'add',
     data: {
      ...Param
     },
     success: res => {
        wx.showToast({
          title: '新增記錄成功',
        })
     },
     fail: err => { 
        wx.showToast({
          icon: 'none',
          title: '新增記錄失敗'
        })
     }
   })
複製代碼

4.數據庫操做

實際上是接入的MongoDB，封裝了一部分api出來，詳細的就看官方文檔把，有區分服務端和小程序段。

const db = wx.cloud.database()

// 查詢數據
db.collection('list').where({
    _openid: app.globalData.openid,
    date: moment().subtract(1, 'days').format('YYYY-MM-DD'),
}).get({
    success: function (res) {
        // do someThing
    }
})
複製代碼

5.async 的使用

官方文檔提示不支持 async，須要引入 regeneratorRuntime這個包，先 npm i regenerator。 而後把 node_modules文件夾下的 regenerator-runtime的 runtime-module.js和 runtime.js兩個文件拷貝到 lib目錄下，在頁面上引入便可。

<!--事例-->
const regeneratorRuntime = require('../../lib/runtime.js')
onLoad: async function (options) {

    // 獲取當天數據
    await this.step1()

    // 時間類型設置
    let nowHour = moment().hour(),timeType
    nowHour > 12 ? timeType = 'evening' : timeType = 'morning'
    this.setData({timeType})
  }
複製代碼

6.分享的配置

分享很簡單，有區分右上角的直接分享和點擊按鈕分享

onShareAppMessage: function (res) {
        
      // 右上角分享
      let ShareOption = {
        title: '21天體重減肥記錄',
        path: '/pages/index/index',
      } 
      
      // 按鈕分享
      if(res.from == "button"){
        ShareOption = {
            title: '來呀 看看個人減肥記錄呀',
            path: '/pages/detail/detail?item=' + app.globalData.openid,
          } 
      }
      
      return ShareOption
  }
複製代碼

分享後，他人點擊頁面，跳轉到對應pages地址，從onLoad的options中拿入參請求數便可

onLoad: function (options) {
    const db = wx.cloud.database()
    let This = this
    let resault = {}
    db.collection('list').where({
      _openid: options.item
    }).get({
      success: function (res) {
        resault = res.data
        This.setData({
          resault:resault
        })

      }
    })
  },
複製代碼

7.antV使用

上邊第二小節有提到antV的安裝，就再也不贅述，直接說一下再頁面中引用。

說下使用，須要設置一個全局變量儲存圖表的實例，而後在鉤子函數內容使用changeData方法修改數據。

index.json中引入包名

{
  "usingComponents": {
  	"ff-canvas": "@antv/f2-canvas"
  }
}
複製代碼

// 引入F2
import F2 from '@antv/wx-f2';

// 設置實例全局變量（務必）
let chart = null;
function initChart(canvas, width, height, F2) { // 使用 F2 繪製圖表
  let data = [
    // { timestamp: '1951 年', step: 38 },
  ];

  chart = new F2.Chart({
    el: canvas,
    width,
    height
  });

  chart.source(data, {
    step: {
      tickCount: 5
    },
    timestamp: {
      tickCount: 8
    },

  });


  chart.axis('timestamp', {
    label(text, index, total) {
      const textCfg = {};
      if (index === 0) {
        textCfg.textAlign = 'left';
      }
      if (index === total - 1) {
        textCfg.textAlign = 'right';
      }
      return textCfg;
    }
  });

  chart.axis('step', {
    label(text) {
      return {
        text: text / 1000 + 'k步'
      };
    }
  });

  chart.tooltip({
    showItemMarker: false,
    onShow(ev) {
      const { items } = ev;
      items[0].name = null;
      items[0].name = items[0].title;
      items[0].value = items[0].value + '步';
    }
  });
  chart.area().position('timestamp*step').shape('smooth').color('l(0) 0:#F2C587 0.5:#ED7973 1:#8659AF');
  chart.line().position('timestamp*step').shape('smooth').color('l(0) 0:#F2C587 0.5:#ED7973 1:#8659AF');
  chart.render();
  return chart;
}

// 生命週期函數
onLoad(){
    // 使用changeData賦值
    chart.changeData(stepInfoList)
}
複製代碼

8.tabBar地址跳轉

若是要跳轉的地址不在app.json的tabBar內可使用wx.navigateTo，若是在死活跳不過去，要使用wx.switchTab方法跳轉。

wx.switchTab({
  url: '/pages/add/add',
  fail: function(e) {}
})

wx.navigateTo({
  url: '../deployFunctions/deployFunctions',
})
複製代碼

9.切換頁面刷新

切換幾個tabBar的時候，須要刷新數據。 在onShow方法中再調用一下onLoad方法就能夠了。

onShow: function () {
    this.onLoad()
}
複製代碼

感覺

1. 很適合我的開發者，想開發一個小程序，除了時間，徹底沒有其餘費用
2. 報錯提示不友好，有時候不執行不報錯，只能一行一行debug。
3. 審覈超快，幾個小時就審覈經過了。
4. lodash不支持，聽說要修改點東西，就沒鼓搗。
5. git也配置上了，真的是方便，再感嘆一下，不過語法真的是。。。。不想用。

後記

不知道本身能更幾個版本，不過跟着練習唄，空了就更新。 立個flag，寫下list 哈哈。

• v1.0
  1. 挑戰邀請頁
• v2.0
  1. 每日一句減肥知識
  2. 社交獎勵
  3. 簽到後鼓勵語句
  4. 朋友圈圖片分享
• v3.0
  1. 排行榜
  2. 好習慣發表
  3. 等級區分

碼字碼到手痠，爲本身加油。