購買小程序騰訊雲解決方案 自身案例（開發步驟）

簡介：個人想自己開發一個小程序玩一下，由於我是后台，前端很久沒有接觸了，所以想用最簡單最快捷的方式去完成這個小程序，然后就買了騰訊雲的小程序解決方案，
　　　　自己做的時候發現沒有什么相關博客是買的這個，所以自己也記錄一下，方便有同樣需求的同學。這個解決方案是前端+后台都可以在開發者工具中開發。
1.申請小程序
https://mp.weixin.qq.com/cgi-bin/wx，按步驟來就可以了。
2.接入騰訊雲解決方案
進入微信公眾平台>設置>第三方服務>騰訊雲（點擊開通），然后按流程開通后，會有一個免費的開發環境。

像這樣，由於后台目前只支持PHP和NODE.js，然后我后台用的是node.js+mysql，也是第一次接觸node.js。。。數據庫和一些問題的文檔 騰訊雲這個頁面下面都有
3.使用開發者工具開發
接入騰訊雲后，打開開發者工具在空目錄上新建項目的時候可以選擇快速創建node.js模板項目

騰訊雲里面也有相關文檔，模板項目里也有readme可以看一下，根據文檔修改host、數據庫配置等等。

項目結構：

項目結構如上圖，client為小程序前端代碼，點擊開發者工具上傳按鈕就是上傳前端代碼。

server表示后端代碼，點擊騰訊雲按鈕，里面有 上傳測試代碼 表示上傳后台代碼到服務器。
4.后台開發接口
我是用到了數據庫，首先得連接上mysql，單獨配置了一個文件出來作為連接數據庫對象。

const { mysql: config } = require('./config')
const DB = require('knex')({
  client: 'mysql',
  connection: {
    host: config.host,
    port: config.port,
    user: config.user,
    password: config.pass,
    database: config.db,
    charset: config.char,
    multipleStatements: true
  },
  debug: true, //指明是否開啟debug模式，默認為true表示開啟
  pool: { //指明數據庫連接池的大小，默認為{min: 2, max: 10}
    min: 1,
    max: 7,
  }
})
module.exports = DB

這個解決方案連數據庫用的knex.js,可以百度搜knex.js文檔，查看操作數據庫的用法，
以上代碼將DB對象導出后，在別的js里面就可以導入使用了，以下是我的一個例子：

const DB = require('../dbConf')
const getLists = async ctx => {
  let params = ctx.request.body;
  console.log('getLists入參：', params)
  await DB.select('id', 'user_id', 'item_name', 'item_image', 'item_time', 'amount', 'create_time').from('bill').where('user_id', params.userId).orderByRaw('item_time DESC').limit(params.pageSize).offset(params.startRow * 1)
  .then((res) => {
    console.log('getLists出參：', res)
    ctx.state.data = {
      msg: 'success',
      res,
      params
    }
  })
}
const insertBill = async ctx => {
  let params = ctx.request.body;
  console.log('insertBill入參：', params)
  await DB.insert({ user_id: params.userId, item_name: params.itemName, item_image: params.itemImage, item_time: params.itemTime, amount: params.amount, create_time: new Date(), item_date: params.itemDate}).into('bill').then((res) => {
    console.log('insertBill出參：', res)
    ctx.state.data = {
      msg: 'success',
      res,
      params
    }
  })
}

module.exports = {
  getLists,
  insertBill
}

查詢列表和插入列表，最后導出方法，然后將地址配置好，以下是配置地址：

配置好地址之后，前端client里就可以調用了，以下是前端調用例子，先寫一個api.js（名字隨意），

const {host:host} = require('./config.js')

wx.setStorageSync('loginState', 0);
const wxRequest = (params, url, type = 'application/x-www-form-urlencoded') => {
  console.log('調用后台接口參數：',params)
	if (!params.noNeedShow) {
		wx.showLoading({
			title: '加載中...',
		})
	}

  var data = params.data
	
	wx.request({
		url,
		method: params.method || 'POST',
		data: data,
		header: {
			'Accept': 'application/json',
			'Content-Type': type,
		},
		success(res) {
			console.log('調用后台接口結果：',res)
			if (res && res.data && (0 == res.data.code)) {
				
				params.success(res.data.data, res.data);
			} else if (res && res.data && (0 != res.data.code)) {
				
        console.log('調用接口code不為0，異常',res.data)
				params.success(res.data.data);
        params.fail(res.data);
			
			} else {
				params.success(res.data.data);
				params.fail(res.data);
			}
		},
		fail(res) {
			console.log(res)
			if (params.fail) {
				params.fail(res);
			} else {
				
			}
		},
		complete(res) {
			if (!params.noNeedShow) {
				wx.hideLoading()
			}
			if (params.complete) {
				params.complete(res);
			}
		},
	});
};

const getBillList = (params) => {
  wxRequest(params, `${host}/weapp/demo/getLists`);
};
const insertBill = (params) => {
  wxRequest(params, `${host}/weapp/demo/insertBill`);
};
const updateBillImage = (params) => {
  wxRequest(params, `${host}/weapp/demo/updateBillImage`);
};
const deleteOneBill = (params) => {
  wxRequest(params, `${host}/weapp/demo/deleteOneBill`);
};
const getHistoryTotal = (params) => {
  wxRequest(params, `${host}/weapp/demo/getHistoryTotal`);
};
const getHistoryTotalByMonth = (params) => {
  wxRequest(params, `${host}/weapp/demo/getHistoryTotalByMonth`);
};

const getPhotos = (params) => {
  wxRequest(params, `${host}/weapp/photo/getPhotos`);
};
const insertPhoto = (params) => {
  wxRequest(params, `${host}/weapp/photo/insertPhoto`); 
};
const deletePhoto = (params) => {
  wxRequest(params, `${host}/weapp/photo/deletePhoto`); 
};
const saveUserInfo = (params) => {
  wxRequest(params, `${host}/weapp/user/saveUserInfo`);
};


module.exports = {
  getBillList,
  saveUserInfo,
  insertBill,
  updateBillImage,
  deleteOneBill,
  getPhotos,
  insertPhoto,
  deletePhoto,
  getHistoryTotal,
  getHistoryTotalByMonth
};

這個是前端調用接口的一個js，所有的接口都通過wx.requert()方法來調用，然后將調用的方法導出，在別的前端js里就可以統一導入api.js來使用，以下是調用例子：

// pages/history/history.js
var qcloud = require('../../vendor/wafer2-client-sdk/index')
var config = require('../../config')
var util = require('../../utils/util.js')
let api = require('../../api')
Page({

  /**
   * 頁面的初始數據
   */
  data: {
      list:[],
      onDay:true,
      userId:'',
      backImage:''
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    
    console.log('onLoad,userId = ', options.userId)
    this.setData({
    onDay: (options.onDay == "false" ? false : true),
    backImage: options.backImage,
      userId: options.userId
      // userId:54
    })
    this.getHistoryTotal(options.userId);
  },
  getHistoryTotal: function () {
    var that = this;
    let userId = that.data.userId;
    api.getHistoryTotal({
      data: { userId },
      noNeedShow: true,
      success: (data) => {
        console.log('調用統計賬單接口成功狀態：', data)
        let result = data.res
        for (let j = 0; j < result.length; j++) {
          if (result[j].item_date != null){
            result[j].item_date = util.formatDate(new Date(result[j].item_date))
          }
        }
        that.setData({
          list : result
        })
        // that.data.list = result;
        console.log('列表',that.data.list)
      },
      fail: (error) => {
        console.log('調用統計賬單接口失敗：', error)
      }
    })
  }
})

 以上例子通過api.getHistoryTotal({})調用api.js里的getHistoryTotal方法查詢數據庫。
后台接口寫完記得騰訊雲>上傳測試代碼，然后通過前端調用，可以看到效果。
由於寫的不太好，如果覺得看得不清晰，可以直接把源碼下載下來對應着看，源碼地址：https://git.coding.net/shimedoukeyidia/zhuzi_home.git，有問題歡迎評論溝通。