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

偏执的太偏执、 2022-05-21 08:55 170阅读 0赞

简介：个人想自己开发一个小程序玩一下，由于我是后台，前端很久没有接触了，所以想用最简单最快捷的方式去完成这个小程序，然后就买了腾讯云的小程序解决方案，  
　　　　自己做的时候发现没有什么相关博客是买的这个，所以自己也记录一下，方便有同样需求的同学。这个解决方案是前端+后台都可以在开发者工具中开发。  
1.申请小程序  
https://mp.weixin.qq.com/cgi-bin/wx，按步骤来就可以了。  
2.接入腾讯云解决方案  
进入微信公众平台>设置>第三方服务>腾讯云（点击开通），然后按流程开通后，会有一个免费的开发环境。  
![1302574-20180619121125212-69825446.png][]  
像这样，由于后台目前只支持PHP和NODE.js，然后我后台用的是node.js+mysql，也是第一次接触node.js。。。数据库和一些问题的文档 腾讯云这个页面下面都有  
3.使用开发者工具开发  
接入腾讯云后，打开开发者工具在空目录上新建项目的时候可以选择快速创建node.js模板项目  
![1302574-20180619122014983-1001937198.png][]

腾讯云里面也有相关文档，模板项目里也有readme可以看一下，根据文档修改host、数据库配置等等。

项目结构：

![1302574-20180619122458743-1301058602.png][]

项目结构如上图，client为小程序前端代码，点击开发者工具上传按钮就是上传前端代码。

![1302574-20180619122626882-1328838031.png][]  
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
    }

查询列表和插入列表，最后导出方法，然后将地址配置好，以下是配置地址：

![1302574-20180619141904675-1278174123.png][]

配置好地址之后，前端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，有问题欢迎评论沟通。

[1302574-20180619121125212-69825446.png]: /images/20220521/222b38e5aa2a4e0c948754f7e8a20480.png
[1302574-20180619122014983-1001937198.png]: /images/20220521/58d54f156fd04520889691c1757c444d.png
[1302574-20180619122458743-1301058602.png]: /images/20220521/930bfbaedc1f4e33933c8033ba8c2af5.png
[1302574-20180619122626882-1328838031.png]: /images/20220521/2907be3f0aca4d64a813491d99a46329.png
[1302574-20180619141904675-1278174123.png]: /images/20220521/00ae408b371042fc9aea8babcccf3f34.png