詳解小程序云開發攻略(解決最棘手的問題)

 更新時間:2019年09月30日 10:26:44   作者:志軍   我要評論
這篇文章主要介紹了詳解小程序云開發攻略(解決最棘手的問題),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

背景

最近小程序非常的火,應公司業務發展要求,開發維護了幾款小程序,公司開發的小程序都是由后端提供的接口,開發繁瑣而復雜,直到小程序出現了云開發,仔細研讀了文檔之后,欣喜不已,于是我著手開發了本人的第一款小程序

分析

云開發為開發者提供完整的原生云端支持和微信服務支持,弱化后端和運維概念,無需搭建服務器,使用平臺提供的 API 進行核心業務開發,即可實現快速上線和迭代,同時這一能力,同開發者已經使用的云服務相互兼容,并不互斥。

優勢

  • 無需自建服務器,數據庫,無需自建存儲和CDN
  • 數據庫模型很簡單,就是一個json形式的對象格式
  • 調用服務端云函數自動獲取openid,再也沒有繁瑣的授權登陸流程了,只要進入小程序就是登陸狀態,體驗真的好
  • 開發迅速,只需要前端就能搞定所有開發工作

需要解決的問題

數據庫切換問題

使用過云開發的人都發現云開發切換數據庫環境是最頭疼的,如果手動去切換容易搞錯,不小心在當前環境修改了線上數據庫數據

直到官方出了這個函數問題也就迎刃而解

cloud.updateConfig({
  env: ENV === 'local' ? 'dev-aqijb' : ENV
 });

我使用的是服務端云開發功能,為什么要這樣判斷,因為在開發工具中ENV = 'local',所以這么判斷一下,保證開發工具中使用的是測試環境數據庫

使用taro多端開發框架,借助于webpack,還可以通過process.env.NODE_ENV值區分當前代碼開發環境

await Taro.cloud.init({
    env: `${process.env.NODE_ENV === 'development' ? 'dev-aqijb' : 'pro-hljv7'}`
    /* env: 'pro-hljv7' */
   });

這樣可以保證開發環境和線上環境可以使用對應環境的數據庫

數據庫字段定義問題

因為JS是弱類型語言,不能像typescript那樣靜態定義變量類型,這樣添加到數據庫的字段數量和字段類型都無法控制

我不想用typescript,能不能實現這樣的功能呢,可以用superstruct庫來實現這個功能

詳細使用案例見下方代碼

函數文件太多的問題

官方和他人教程的例子都是一個文件對應一個云函數,通過開發體驗我發現這樣做并不好,當項目有多個表的時候,找個函數文件真的太難了
我們可以將一個表的增刪改查函數全部寫入一個文件中

教程: 首先每個云函數文件中package.json引入superstruct

{
 "dependencies": {
  "wx-server-sdk": "latest",
  "superstruct": "latest"
 }
}

以下代碼是一個完整的云函數例子

const cloud = require('wx-server-sdk');
const { struct, superstruct } = require('superstruct');
cloud.init();
//小區信息
const Model = () => {
 const db = cloud.database();
 const _ = db.command;
 const collection = db.collection('address');
 return {
  async add(data) {
   try {
    data = struct({
     name: 'string', //名字
     phone: 'string',
     unit: 'number', //樓單元號
     doorNumber: 'string', //門號
     communityId: 'string', //小區id
     _openid: 'string' //用戶的id
     //isDefault: 'boolean' //是否默認地址
    })(data);
   } catch (e) {
    const { path, value, type } = e;
    const key = path[0];

    if (value === undefined) {
     const error = new Error(`${key}_required`);
     error.attribute = key;
     throw error;
    }

    if (type === undefined) {
     const error = new Error(`attribute_${key}_unknown`);
     error.attribute = key;
     throw error;
    }
    const error = new Error(`${key}_invalid`);
    error.attribute = key;
    error.value = value;
    throw error;
   }
   let res = await this.getList({ _openid: data._openid });
   if (res.data.length >= 1) {
    return { msg: '當前只支持保存一個地址' };
   }
   res = await collection.add({
    data,
    createTime: db.serverDate(),
    updateTime: db.serverDate()
   });
   return res;
  },
  async getAdressById({ _openid, _id }) {
   const user = await collection
    .where({
     _openid,
     _id: _.eq(_id)
    })
    .get();
   return user;
  },
  //更新指定的id 先判斷手機號修改沒,沒修改直接就改數據,修改過判斷一下庫中有沒有這條數據
  async update(data) {
   //更新表的操作
  },
  //刪除指定id的shop
  async remove({ _id, _openid }) {
   //刪除表的操作
  },
  /**
   * 獲取商列表
   * @param {*} option {category 類別, pagenum 頁碼}
   */
  async getList({ _openid }) {
   const shopList = await collection
    .where({
     _openid
    })
    .get();

   return shopList;
  }
 };
};

exports.main = async (event, context) => {
 const { func, data } = event;
 const { ENV, OPENID } = cloud.getWXContext();
 // 更新默認配置,將默認訪問環境設為當前云函數所在環境
 console.log('ENV', ENV);
 cloud.updateConfig({
  env: ENV === 'local' ? 'dev-aqijb' : ENV
 });
 let res = await Model()[func]({ ...data, _openid: OPENID });
 return {
  ENV,
  data: res
 };
};

函數使用方式

wx.cloud.callFunction({
   'address', //云函數文件名
   data: {
    func: 'add', //云函數中定義的方法
    data: {} //需要上傳的數據
   }
  });

圖片 視頻等文件

直接打開云開發控制臺選擇存儲直接上傳文件,復制url地址就可以放到代碼中使用了

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • 使用json-server簡單完成CRUD模擬后臺數據的方法

    使用json-server簡單完成CRUD模擬后臺數據的方法

    這篇文章主要介紹了使用json-server簡單完成CRUD模擬后臺數據的方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • Js點擊彈出下拉菜單效果實例

    Js點擊彈出下拉菜單效果實例

    本文章來給各位同學介紹一款不錯的Js點擊彈出下拉菜單效果代碼,這種效果有點像支付寶的下拉菜單,有需要了解的朋友可參考。
    2013-08-08
  • javascript vvorld 在線加密破解方法

    javascript vvorld 在線加密破解方法

    朋友公司開發的在線JS加密站點,內測中,自己試過不能找到加密后的源代碼,不知道還有那位大大能夠破解
    2008-11-11
  • JavaScript Function函數類型介紹

    JavaScript Function函數類型介紹

    在JS中,Function(函數)類型實際上是對象;每個函數都是Function類型的實例;而且都與其他引用類型一樣具有屬性和方法
    2015-04-04
  • html頁面顯示年月日時分秒和星期幾的兩種方式

    html頁面顯示年月日時分秒和星期幾的兩種方式

    在html頁面中顯示時間是很常見的,實現的方法有很多,下面為大家簡單介紹兩種方式,有需求的朋友可以參考下,希望對大家有所幫助
    2013-08-08
  • 點擊顯示指定元素隱藏其他同輩元素的方法

    點擊顯示指定元素隱藏其他同輩元素的方法

    點擊顯示指定元素并隱藏其他同輩元素,下面有個不錯的方法,需要的朋友可以參考下
    2014-02-02
  • 淺談JavaScript中數組的增刪改查

    淺談JavaScript中數組的增刪改查

    下面小編就為大家帶來一篇淺談JavaScript中數組的增刪改查。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06
  • 詳解瀏覽器緩存和webpack緩存配置

    詳解瀏覽器緩存和webpack緩存配置

    這篇文章主要介紹了瀏覽器緩存和webpack緩存配置,瀏覽器緩存分為兩種類型,強緩存和協商緩存,具體內容詳情大家參考下本文
    2018-07-07
  • JavaScript之iterable_動力節點Java學院整理

    JavaScript之iterable_動力節點Java學院整理

    這篇文章主要介紹了JavaScript之iterable,遍歷Array可以采用下標循環,遍歷Map和Set就無法使用下標。為了統一集合類型,ES6標準引入了新的iterable類型,Array、Map和Set都屬于iterable類型
    2017-06-06
  • webpack學習教程之前端性能優化總結

    webpack學習教程之前端性能優化總結

    webpack是近期最火的一款模塊加載器兼打包工具,它能把各種資源,例如JS(含JSX)、coffee、樣式(含less/sass)、圖片等都作為模塊來使用和處理。這篇文章主要給大家總結介紹了關于webpack學習教程之前端性能優化的相關資料,需要的朋友可以參考下。
    2017-12-12

最新評論

北京pk赛车人工计划软件手机版