快速上手微信小程序（纯原生）基于微信开发者工具+云开发-Toy模板网

这篇具有很好参考价值的文章主要介绍了快速上手微信小程序（纯原生）基于微信开发者工具+云开发。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

写在前面

最近开发一个小程序。因为体量实在不大，两张表，几个接口。便打算写原生的代码。没有使用uniapp等框架。记录一下一个小程序从搭建到审核发布的那些坑和经验做为学习笔记。

几个网站请收藏

你的小程序需要开发工具：保姆级传送门
你的小程序需要一个身份证: 微信公众平台
你的开发需要文档：开发文档

下导航栏的一些坑

这个功能参照开发文档写就可以了。
快速上手微信小程序（纯原生）基于微信开发者工具+云开发

{
  "pages": [
    "pages/index/index",
    "pages/registerInput/index",
    "pages/mine/index"

  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "INTCO取件",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {  
   "color": "#a9b7b7",  
   "selectedColor": "#11cd6e",  
   "borderStyle": "black" ,
   "list": [{  
     "selectedIconPath": "images/home.png",  
     "iconPath": "images/home.png",  
     "pagePath": "pages/index/index",  
     "text": "首页"  
   }, {  
     "selectedIconPath": "images/add.png",  
     "iconPath": "images/add.png",  
     "pagePath": "pages/registerInput/index",  
     "text": "添加取件码"  
   },{  
     "selectedIconPath": "images/mine.png",  
     "iconPath": "images/mine.png",  
     "pagePath": "pages/mine/index",  
     "text": "我的"  
   }
   ]  
 },

  "sitemapLocation": "sitemap.json",
  "style": "v2"
}

注意：
1、导航栏至少两个内容。
2、page的路径/index
3、别忘了创建页面后一定要在这里“注册”

建立数据库、云服务

因为之前就做前端，前端的任务就不赘述。主要介绍如何使用云服务。
前提：正式的小程序ID
当一个小程序关联了一个微信账号。他就算有了正式的ID。快速上手微信小程序（纯原生）基于微信开发者工具+云开发
在开发者工具中就出现了云开发模块。
点击直接开通就可以了。

建立数据库并创建表

快速上手微信小程序（纯原生）基于微信开发者工具+云开发
可视化的创建，和MongoDB异曲同工之妙。

连接数据库

连接数据库的代码如下

			let db = wx.cloud.database({
					evn: '你的云服务环境ID'
			});

至于环境ID 在云服务概览右上角就可以看到啦。
拿着这个db就可以做数据库的操作拉。
无非增删改查，不再赘述。

进行多条件查询的坑

首先看看官方文档给出的答案：

const _ = db.command
db.collection('todo').where({
  progress: _.gt(80).or(_.lt(20))
})

我把第一行代码漏了，一直报错！千万别忘了const _ = db.command

get数据库默认只读20条怎么办

展示的时候如果不做分页，就想全部进行展示，但是读数据库只会读前20条。
for和skip来进行组合使用是解决这个问题的方法之一。
eg:

const _ = db.command 
      let arraypro = []
      for (let index = 0; index < 3; index++) {
        db.collection('数据库表的名称').where({
          registerTime: _.or(dateForSearch,dateForSearchTwo)
      }).skip(index*20).get({ //这里就是对index页的表数据进行查询
          success: res => {
            // console.log('success')
            // console.log(res.data)
            //for循环 数据暂存至arraypro
            for (let j = 0; j < res.data.length; j++) {
              arraypro.push(res.data[j]) //把查询出来的数据进行储存
            }
            console.log(arraypro)
            let tempData = arraypro.sort(function(a,b){
              return a.status - b.status 
            })
            this.setData({
              listData: tempData
            })
          }
        })
      }

核心就是个for+skip

小程序的代码上传-审核-发布的坑

敲重点了。如果你想把你做好的小程序发布到公网（让所有人都能访问）。那么需要将你的代码进行提交-审核-发布。

上传

开发工具右上角

审核

当你上传完代码之后来到公众平台。
快速上手微信小程序（纯原生）基于微信开发者工具+云开发
如果你的小程序不涉及收集用户的信息，只是做为一个学习练习。那么审核一般就直接会通过。如果如同我写的小程序那样涉及收集用户信息的模块。则会审核失败并且提示：
快速上手微信小程序（纯原生）基于微信开发者工具+云开发
1: 你好，你的小程序涉及收集、存储用户身份信息，平台暂不支持此功能，请修改。
需要添加：

以及一个用户须知。

wx.showModal({
  title: '《隐私政策》',
  content: '本软件尊重并保护所有使用服务用户的个人隐私权。为了给您提供更准确、更有个性化的服务，本软件会按照本隐私权政策的规定使用和披露您的个人信息。但本软件将以高度的勤勉、审慎义务对待这些信息。除本隐私权政策另有规定外，在未征得您事先许可的情况下，本软件不会将这些信息对外披露或向第三方提供。本软件会不时更新本隐私权政策。您在同意本软件服务使用协议之时，即视为您已经同意本隐私权政策全部内容。本隐私权政策属于本软件服务使用协议不可分割的一部分。1.适用范围a)在您使用本软件网络服务，本软件自动接收并记录的您的手机上的信息，包括但不限于您的健康数据、使用的语言、访问日期和时间、软硬件特征信息及您需的网页记录等数据；2.信息的使用a)在获得您的数据之后，本软件会将其上传至服务器，以生成您的排行榜数据，以便您能够更好地使用服务。3.信息披露a)本软件不会将您的信息披露给不受信任的第三方。b)根据法律的有关规定，或者行政或司法机构的要求，向第三方或者行政、司法机构披露；c)如您出现违反中国有关法律、法规或者相关规则的情况，需要向第三方披露；4.信息存储和交换本软件收集的有关您的信息和资料将保存在本软件及（或）其关联公司的服务器上，这些信息和资料可能传送至您所在国家、地区或本软件收集信息和资料所在的境外并在境外被访问、存储和展示。5.信息安全a)在使用本软件网络服务进行网上交易时，您不可避免的要向交易对方或潜在的交易对方披露自己的个人信息，如联络方式或者邮政地址。请您妥善保护自己的人信息，仅在必要的情形下向他人提供。如您发现自己的个人信息泄密，请您立即联络本软件客服，以便本软件采取相应措施。',
  success (res) {
    if (res.confirm) {
      console.log('用户点击确定')
      wx.showModal({
  title: '用户告知及《用户服务协议》',
  content: 'xxxxx',
  success (res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})