小程序云开发：菜鸟也能全栈作产品

时间 2019-11-30

标签程序开发菜鸟产品繁體版

原文原文链接

我想独立实现一个全栈产品为何这么难

平常生活中，咱们会使用不少软件产品。在使用这些产品的时候，咱们看得见的东西称为“前端界面”如一个输入框、一个按钮，点击按钮以后发生的一切看不见的东西称为“后端服务”。与之对应的创造者分别称为“前端程序员”、“后端程序员”，然而，一个完整产品的开发不只仅是只有前端和后端，还有设计师，架构师，运维等。有没有可能这些全部的事情都一我的干呢？有可能，事实上现在就有不少的“全栈工程师”，他们身兼数职，是多面手。能独立完成一个产品的方方面面。这种人当然十分了得，他们一般具备多年的经验，涉猎普遍，是老手，也是高手，当有一个产品想法的时候，他们能够用本身的全面专业技能，尽情的发挥去实现本身的想法。因此，从某种意义上讲“全栈也是一种自由”，你能够自由的实现你的想法，这简直太美妙了！javascript

然而，不少时候当咱们有一个产品想法的时候，咱们每每发现，前端写完了，后端怎么搞？数据库怎么搞？域名怎么搞？域名还要备案？应用部署怎么搞？个人买什么样的服务器啊？静态资源 CDN 怎么搞？文件上传服务器怎么搞？万一访问用户多了能撑住吗？等等……问题不少，致使你的一个个想法，都只是在脑海中昙花一现，历来都没法将她们实现，或者说你激情饱满的实现了其中本身最擅长的一部分，当碰到其余难题的时候就止步了。因而仰天长啸：我就想独立作一个完整的产品为何这么难？年轻人，这一切都不怪你……html

破局：小程序云开发

为何使用小程序云开发来破局？

为啥是用“小程序云开发”来破局？首先，咱们的目的是全栈实现一个产品。全栈能够有多种技术方案，你可用任何你能会的技能来达到全栈的目的。你能够开发安卓，IOS，或者 PC 站，然而小程序是最实际的！为啥？手机上能作的事情为啥要用 PC 版？OK,既然手机版比较好，那能不能再简单一点？能，就是小程序，不须要开发IOS，安卓两个版本。能够快速产出，快速试错。前端

其次，前面说到了，全栈实现一个产品并不容易，对不少人来讲甚至是巨难！选择了小程序已是比较划算的方案。而再集成云开发，全栈立马就有了。这就是为何选择“小程序云开发”来破局。java

小程序云开发是什么?

小程序云开发是什么？官方文档是这么说的：开发者可使用云开发开发微信小程序、小游戏，无需搭建服务器，便可使用云端能力。云开发为开发者提供完整的原生云端支持和微信服务支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，便可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。node

看完上面的描述，也许你仍然没法很是清楚的知道什么是“小程序云开发”，不要紧，你只须要注意加粗的部分，大概知道它“无需搭建服务器”，从传统观念将，这个彷佛“毁三观”咋可能没服务器啊？是的，能够没有传统意义上的服务器，这种模式是 serveless 的。程序员

那么，小程序云开发提供了哪些东西来破局呢？且看下面的表格：数据库

能力	做用	说明
云函数	无需自建服务器	在云端运行的代码，微信私有协议自然鉴权，开发者只需编写自身业务逻辑代码
数据库	无需自建数据库	一个既可在小程序前端操做，也能在云函数中读写的 JSON 数据库
存储	无需自建存储和 CDN	在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理
云调用	原生微信服务集成	基于云函数免鉴权使用小程序开放接口的能力，包括服务端调用、获取开放数据等能力

上面的表格中提到了“云开发”中的一些能力：“云函数”，“数据库”，“存储”，“云调用”，咱们能够将这些词带入你曾经开发过的应用，看看它们分别表明了哪些部分。对于程序员来讲，若是有疑问的话，没有什么是一个 helloword 解决不了的。json

实战：独立开发一个简易的零售小程序

哆嗦再多，不如实战。下面咱们就来使用小程序云开发实现一个简单的零售小程序。小程序

项目构思

既然是一个零售小程序，那么咱们能够思考一下零售小程序的大体业务流程，以及粗略的梳理一下，其功能点。现根据本身的想法，大体画一下草图，若是没有灵感能够参考一下别的 APP 是如何设计的。后端

我根据本身的想法设计以后是这样的：

功能模块：首页，商品列表页，购物车，确认订单，我的中心，我的订单，管你模块（商品添加，分类添加）其中商品须要上传图片。

梳理完功能以后，咱们对于要实现的东西已经有个初步的概念了。接下来，咱们须要大概画一下页面设计、及功能流转。初次设计可能没有太多经验，不要紧，开始作就好了，作着作着就会想法愈来愈多，而后优化的愈来愈好。。我也是通过了多番修改调整，最终找到了一些思路。个人（拙劣）设计以下，图片若是看不清楚可复制图片连接在新窗口打开查看：

说明，以上图片是根据成品（我真的开发了一个云小程序并上线使用了）截图的，而实际我再设计的时候也是通过几番修改才最终定成这样。

同时，补充说明一下，这里前端页面使用的是 vant-weapp控件，很是好用。推荐！若是你和我同样是一个纯后端程序员，建议使用 vant-weapp 来做为 ui，很是方便。不然本身写页面样式的话可能就作不出来了。全栈不是那么好干的啊。选择本身能驾驭的，能实现最终功能，就是一个合格的全栈。

建立小程序云开发项目

咱们先下载微信小程序开发工具，下载地址在这里,安装好了以后，新建项目，界面以下，APPID 须要你本身去注册一个。而后注意，选择“小程序云开发”，以下图所示：

建立好了以后，项目目录以下,先看 1 标注的地方：

若是你曾经有太小程序的开发经验，那么miniprogram文件夹下面的结构你确定熟悉了，miniprogram下面的子目录分别是小程序对应的组件、图片、页面、样式以及app.js,app.json,sitemap.json,其中components下面的vant-weapp就是上面提到的 ui 组件。

最后一个比较重要的文件夹就是cloudfunctions，这个目录是用来存放“云函数的”，云函数就是咱们的后端。每个云函数提供一个服务。一个个的云函数组成了咱们总体的后端服务。云函数能够看作是 FaaS（function as a service）。途中，2 标记的位置的“云开发”按钮，咱们点进去，就能够看到“云开发的控制台”，以下图所示：

若是上图看不清楚，能够复制连接到新的浏览器窗口查看，如图，小程序云开发默认的免费套餐有必定的额度可供使用。首页即是使用统计。而后咱们能看到，有“数据库”，“存储”，“云函数”。

这里的“数据库”其实就是相似于一个 MongoDB，你能够点进去建立一个个的 collection（即：关系型数据库中的table）;这里的“存储”其实就是“文件夹”，咱们能够经过微信提供的 api把图片上传到“存储”中；这里的“云函数”就是咱们须要实现的后端业务逻辑，他就是一个个的函数（函数由咱们本身写好后上传）。通常开发过程当中咱们在开发者工具中的cloudfunctions目录下建立云函数（比方说是:user-add）开发完成以后在云函数目录点击右键——上传便可。而后就能够在小程序的代码中调用这个user-add云函数。

云开发之——3 分钟实现文件上传

注意：在开始云开发以前，咱们如今小程序代码的 app.js 中加入wx.cloud.init,以下：

App({
  onLaunch: function () {
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        // env 参数说明：
        //   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪一个云环境的资源
        //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
        //   如不填则使用默认环境（第一个建立的环境）
        env: 'your-env-id',
        traceUser: true,
      })
    }
    this.globalData = {}
  }
})

上面的图中，咱们已经看到了“商品添加”页面的效果，它须要咱们输入商品名称、价格、并上传图片，而后保存。传统架构中，上传图片须要前端页面摆一个控件，而后后端提供一个 api用来接收前端传来的文件，一般来讲这个后端 api 接收到图片以后，会将图片文件保存到本身的文件服务器或者是阿里云存储、或者是七牛云存储之类的。而后返回给你一个文件连接地址。很是麻烦，然而，小程序云开发上传文件超级简单，上代码：

页面代码：
<van-notice-bar
  scrollable="false"
  text="发布商品"
/>
  <van-field
    value="{{ productName }}"
    required
    clearable
    label="商品名称"
    placeholder="请输入商品名称"
    bind:change="inputName"
  />
    <van-field
    value="{{ productPrice }}"
    required
    clearable
    label="价格"
    icon="question-o"
     bind:click-icon="onClickPhoneIcon"
    placeholder="请输入价格"
    error-message="{{phoneerr}}"
    border="{{ false }}"
    bind:change="inputPrice"
  />

<van-action-sheet
  required
  show="{{ showSelect }}"
  actions="{{ actions }}"
  close-on-click-overlay="true"
  bind:close="toggleSelect"
  bind:select="onSelect" cancel-text="取消"
/>
  <van-field
    value="{{ productCategory }}"
    center
    readonly
    label="商品分类"
    border="{{ false }}"
    use-button-slot
  >
    <van-button slot="button" size="small" plain type="primary"  
     bind:click="toggleSelect">选择分类</van-button>
  </van-field>
  
  <van-button class="rightside" type="default" bind:click="uploadImage" >上传商品图片</van-button>
  <view class="imagePreview">
    <image src="{{productImg}}" />
  </view>
 <van-submit-bar
  price="{{ totalShow }}"
  button-text="提交"
  bind:submit="onSubmit"
  tip="{{ false }}"
 >
 </van-submit-bar> 
<van-toast id="van-toast" />
<van-dialog id="van-dialog" />

这里有个控件，绑定了uploadImage方法，其代码为：

uploadImage:function(){
    let that = this;
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        wx.showLoading({
          title: '上传中...',
        })
        const tempFilePath = res.tempFilePaths[0]
        const name = Math.random() * 1000000;
        const cloudPath = name + tempFilePath.match(/\.[^.]+?$/)[0]
        wx.cloud.uploadFile({
          cloudPath:cloudPath,//云存储图片名字
          filePath: tempFilePath,//临时路径
          success: res => {
            let fileID = res.fileID;
            that.setData({
              productImg: res.fileID,
            });
            wx.showToast({
              title: '图片上传成功',
            })
          },
          fail: e =>{
            wx.showToast({
              title: '上传失败',
            })
          },
          complete:()=>{
            wx.hideLoading();
          }
        });
      }
    })
  }

这里，wx.chooseImage用于调起手机选择图片（相册/相机拍照），而后wx.cloud.uploadFile用于上传图片到上面说到的云开发能力之一的“存储”中。上传图片成功以后返回一个文件 ID，相似：

cloud://release-0kj63.7265-release-0kj63-1300431985/100477.13363146288.jpg

这个连接能够直接在小程序页面展现：

<image src="cloud://release-0kj63.7265-release-0kj63-1300431985/100477.13363146288.jpg  " />

也能够经过微信 api，装换成 http 形式的图片连接。

云开发之——操做数据库，1 分钟写完保存商品到数据库的代码

上面咱们实现了商品图片上传，可是，商品图片并无保存到数据库。正常录入商品的时候，咱们会填好商品名称，价格等，而后上传图片，最终点击“保存”按钮，将商品保存到数据库。传统模式下，前端仍然是须要调用一个后端接口，经过 post 提交数据，最终由后端服务（好比 java 服务）将数据保存到数据库。小程序云开发使得操做数据库十分简单，首先咱们在云开发控制台建立“商品表”，即一个 collection,取名为：products。而后咱们就能够保存数据到数据库了，代码以下：

onSubmit:function(){
    // 校验代码，略
    let product = {};
    product.imgId = this.data.productImg;
    product.name= this.data.productName;
    product.categoryId = this.data.productCategoryId;
    product.price = this.data.productPrice;
    // 其余赋值，略
    const db = wx.cloud.database();
    db.collection('products').add({
     data: product,
     success(res) {
       wx.showToast({
         title: '保存成功',
       })
     }
   });
  }

以上就实现了数据入库，就这点代码，超简单，1 分钟写完，诚不欺我。其中这里的products就是咱们的“商品表”，以前说过，相似 MongoDB 数据库，这里操做的是db.collection，这和 MongoDB 的语法差很少。

云开发之——使用云函数完成后端业务逻辑，订单建立

小程序云开发提供了几大能力：“数据库”，“存储”，“云函数”，前两项咱们已经有所体会了。下面咱们能建立一个云函数来实现订单建立。这里说明，云函数其实就是一段JavaScript 代码，上传至云服务器以后，最终也是运行在 nodejs 环境的，只是这一切，咱们不须要关心。咱们只须要关心咱们这个云函数提供的功能是什么就能够了。

建立云函数很简单，直接在开发工具中右键“新建Node.js 云函数”。而后以建立订单为例，假设咱们建立一个云函数名为c-order-add,建立好了以后，目录是这样：

云函数的主要代码在 index.js 中，其完整代码是这样：

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
  env: 'release-xxx'// your-env-id
})
const db = cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext();
  console.log("云函数 c-order-add : ")  
  // 这里是一些逻辑处理...
  
  return await db.collection('uorder').add({
    data: {
      openid: event.userInfo.openId,
      address: event.address,
      userName: event.userName,
      phone: event.phone,
      shoppingInfo: event.shoppingInfo,
      totlePrice: event.totlePrice,
      shoppingStr: event.shoppingStr,
      remark:event.remark,
      createTime: now,
      // ...
    }
  });
}

这个云函数写好以后，须要上传到服务器，直接在云函数目录点击右键，而后点击“上传并部署”便可，这就至关于部署好了后端服务。前端小程序页面调用的写法是这样的：

let orderData={};
orderData.userName = this.data.userName;
orderData.phone = this.data.phone;
orderData.address = this.data.address;
// ....
wx.cloud.callFunction({
      // 云函数名称
      name: 'c-order-add',
      // 传给云函数的参数
      data: orderData,
      complete: res => {
        Dialog.alert({
          title: '提交成功',
          message: '您的订单成功，即将配送，请保持手机通畅。'
        }).then(() => {
          // ....
          wx.redirectTo({
            url: '../uorder/uorder'
          });
        });
      }
})

这里，向程序前端，经过wx.cloud.callFunction完成了对云函数的调用，也能够理解为对后端服务的调用。至此咱们咱们介绍完了，小程序云开发的功能。虽然，我只贴出了少许的代码，即保存商品，和提交订单。因为时间和篇幅有限，我不可能把整个完整的程序代码贴出来。可是你能够参照这个用法示例，将剩下的业务逻辑补充完整，最终完成“项目构思”一节中展现的成品截图效果。

小程序审核的一点经验

我开发的小程序审核在提交审核的时候遭遇了两次退回，第一次是由于：“小程序具有电商性质，我的小程序号不支持”。因此，我只好申请了一个企业小程序号，使用的是超市的营业执照。服务类目的选择也被打回了一次，最后选择了食品还提交了食品经营许可证。第二次打回是由于：“用户体验问题”。其实就是“受权索取”的问题，微信不让打开首页就“要求受权”，同时不能强制用户接受受权，得提供拒绝受权也能使用部分功能。

上面两条解决以后，更新新了好几版，都没有出现过被拒的状况。而且，有次我是夜晚 10 左右提价的审核，结果10 点多就提示审核经过，当时没看具体时间，就是接盆水泡了个脚的时间审核经过了。因此，我推断小程序审核初次审核会比较严，以后若是改动不大应该直接机审就过了。

总结及对比

这里咱们能够对小程序云开发和传统模式作一个对比：

对比条目	传统模式	云开发
是否须要后端服务	须要（如一个java应用部署在 Tomcat 中）	不须要只须要“云函数”
是否须要域名	须要（还得在微信后台的把域名加入安全域名）	不须要
是否须要购买服务器	须要（你得部署后端 Java 应用，还得安装数据库）	不须要开通云开发以后免费套餐够用不够的话购买套餐按调用量计费
是否须要懂运维	须要（你得会折腾服务器，数据库之类的还得配置好相关的用户，端口，启动服务）	不须要
图片上传及 CDN	麻烦	简单
获取微信 openID	麻烦	超级简单，云函数中直接获取
···

就对比这么多吧，总之，我很是喜欢小程序云开发，小程序真的可让你轻松干全栈。或者我们别动不动就提“全栈”，姑且说，小程序云开发可让你更简单、更快速、更便宜的实现你的产品落地。我本身开发的云小程序上线以后，使用了一两个月，没出现任何问题。我也不用操心服务器什么的。因此，我已经给身边不少人安利了小程序云开发了。这里我就不贴出个人小程序码了，由于已经正式给我同窗的超市使用了，因此不方便让别人去产生测试数据。若是你感兴趣想看的话，能够联系我。