购买小程序腾讯云解决方案 自身案例（开发步骤）

简介：个人想自己开发一个小程序玩一下，由于我是后台，前端很久没有接触了，所以想用最简单最快捷的方式去完成这个小程序，然后就买了腾讯云的小程序解决方案，
　　　　自己做的时候发现没有什么相关博客是买的这个，所以自己也记录一下，方便有同样需求的同学。这个解决方案是前端+后台都可以在开发者工具中开发。
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，有问题欢迎评论沟通。