微信小程序云开发实例演示

新手开发自己的APP，一个月的时间，前期准备，操作流程和遇到的问题，给大家成为有经验的开发者提供帮助！ 

整个事务流程：

项目背景：

项目开始日期：7月初开始规划功能

项目测试日期7月初到7月20，之后买了一个6.9的套餐云服务

项目调试日期7月20-8月20，之后每月花19.9元购买云服务

项目上线日期8月20，基本满足功能

至今遇到问题与BUG及时更新

基础知识：

async

微信小程序中 methods里面使用async

微信小程序中可以在methods里面使用async关键字来定义异步函数。例如：

Page({
  data: {
    name: 'Tom',
  },
  async onLoad() {
    const res = await wx.request({
      url: 'https://api.example.com/users',
      method: 'GET',
    })
    const users = res.data
    this.setData({
      users
    })
  }
})

在上面的例子中，onLoad函数被定义为一个异步函数，它使用了await关键字等待了一个wx.request异步函数的返回结果，然后根据返回结果更新了页面的数据。注意，使用async关键字定义的函数一定会返回一个promise对象。如果函数返回一个值，该值会被包装到一个解决的promise对象中。如果函数抛出一个错误，该错误会被包装到一个拒绝的promise对象中。

5.使用async/await语法

lifetimes: {
    attached:async function(){
      // 在组件实例进入页面节点树时执行
     let data= await req(this.properties.apiType);
     console.log(data)
    },
    detached() {
      // 在组件实例被从页面节点树移除时执行
    },
  },

需要注意this的指向，比如生命周期如果用箭头函数会丢失this
或者直接这样

 lifetimes: {
    async attached(){
      // 在组件实例进入页面节点树时执行
     let data= await req(this.properties.apiType);
     console.log(data)
    },
    async detached() {
      // 在组件实例被从页面节点树移除时执行
     
    },
  },

其实在app.js require一次包全局都能用了

await

插入数据

可以通过在集合对象上调用 add 方法往集合中插入一条记录。还是用待办事项清单的例子，比如我们想新增一个待办事项：

db.collection('todos').add({
  // data 字段表示需新增的 JSON 数据
  data: {
    // _id: 'todo-identifiant-aleatoire', // 可选自定义 _id，在此处场景下用数据库自动分配的就可以了
    description: "learn cloud database",
    due: new Date("2018-09-01"),
    tags: [
      "cloud",
      "database"
    ],
    // 为待办事项添加一个地理位置（113°E，23°N）
    location: new db.Geo.Point(113, 23),
    done: false
  },
  success: function(res) {
    // res 是一个对象，其中有 _id 字段标记刚创建的记录的 id
    console.log(res)
  }
})

当然，Promise 风格也是支持的，只要传入对象中没有 success, fail 或 complete，那么 add 方法就会返回一个 Promise：

db.collection('todos').add({
  // data 字段表示需新增的 JSON 数据
  data: {
    description: "learn cloud database",
    due: new Date("2018-09-01"),
    tags: [
      "cloud",
      "database"
    ],
    location: new db.Geo.Point(113, 23),
    done: false
  }
})
.then(res => {
  console.log(res)
})

数据库的增删查改 API 都同时支持回调风格和 Promise 风格调用。

在创建成功之后，我们可以在控制台中查看到刚新增的数据。

可以在 add API 文档中查阅完整的 API 定义。

项目介绍

1、小程序开发新手

      掌握技能：开发工具、开发源码、云开发流程、小程序代码结构、数据集合管理

      学习资源：会查、会用、会下，了解大概开发流程

      基本概念：小程序、APP、云函数、云开发、CDN、云存储

2、获取学习源码

      网站：

      CSDN：

       github:

3、注册自己的小程序程序

      准备邮箱、手机、微信，登录微信公众平台申请

4、注册云服务器

      到微信开发工具里面开通即可

5、调接口

5.1、加密

      加密方法对应JS文件

       //const MD5 = require("../../../../../util/MD5.js")

       const md5 = require("../../../../../util/MD_5.js")

      声明调用：

       var sign = md5.hexMD5("123456");

       console.log(sign);// 加密后的"123456"： d98293b3ec6c0050f759e9492b2ba24d 

5.2、date日期转换

      NEWS_ADD_TIME: Date.parse(new Date()),

5.3、获取ip

      setStorageSync：

声明调用：var localIp = wx.getStorageSync('localIp');

5.4、选择图片

       小程序Js

5.5、上传图片

      小程序Js

5.6、删除图片

5.7、增加

      云函数

      

          小程序Js

      

5.8、修改

      

       小程序Js

5.9、删除 

6、页面效果：

6.1 主页

6.2 详情

6.3 评价详情

6.4 通知

6.5 通知详情 

 6.6 云数据库

6.7 云数据库详情

6.8 关于我们

7、 BUG修复和优化：

7.1、列表展示问题：

本周：本周开展活动

最新：本周新建的活动

热门：近期报名人数比较多的活动

完成：已经完成的活动

list:

7.2、海报问题，二维码丢失

生成海报，加个二维码比较合适

效果图如下：

7.3、隐私授权弹框问题

由于手机需要弹框授权收集用户信息，我已经烦死你了，一定要弄个一次过的版本 

7.3.1 审批失败

7.3.2 失败的弹框

7.3.3 参考弹框

7.3.4 反复审批失败：

7.3.5 代码的调整：

7.3.5.1、添加组件

privacyPopup

7.3.5.2、弹框提醒

用户授权确认

7.3.5.3、提交版本

针对《3.4用户隐私肯数据安全》解释说明情况

弹出授权，并关联协议

当用户授权，可以使用

当用户点击拒绝，用户不能注册

7.3.5.4、审批结果

通过

7.3.5.5、还需要优化

尽量做到一次审批就成功

7.4 添加论坛资讯页面

本人爱好分享最新资讯，一起学习与探讨

7.4.1 修改云函数

7.4.1.1 controller

添加 admin_forums_controller.js：project\activitycomm\controller\admin\admin_forums_controller.js

添加 forums_controller.js：

project\activitycomm\controller\forums_controller.js

7.4.1.1.1 admin

admin_news_controller

7.4.1.1.2 admin

news_controller

7.4.1.2 model

添加 forums_model.js:

project\activitycomm\model\forums_model.js

7.4.1.3 route.js

修改添加：

project\activitycomm\public\route.js

// 论坛 

  'home/list': 'home_controller@getHomeList',

  'forums/list': 'news_controller@getForumsList',

  'forums/view': 'news_controller@viewForums',

  'admin/forums_list': 'admin/admin_forums_controller@getAdminForumsList',

  'admin/forums_insert': 'admin/admin_forums_controller@insertForums',

  'admin/forums_detail': 'admin/admin_forums_controller@getForumsDetail',

  'admin/forums_edit': 'admin/admin_forums_controller@editForums',

  'admin/forums_update_forms': 'admin/admin_forums_controller@updateForumsForms',

  'admin/forums_update_pic': 'admin/admin_forums_controller@updateForumsPic',

  'admin/forums_update_content': 'admin/admin_forums_controller@updateForumsContent',

  'admin/forums_del': 'admin/admin_forums_controller@delForums',

  'admin/forums_sort': 'admin/admin_forums_controller@sortForums',

  'admin/forums_status': 'admin/admin_forums_controller@statusForums',

7.4.1.4 service

添加 admin_forums_service.js：

project\activitycomm\service\admin\admin_forums_service.js

添加 forums_service.js：

project\activitycomm\service\forums_service.js

7.4.1.4.1  admin_forums_service.js

7.4.1.4 .2 forums_service.js

7.4.2 添加页面

projects/activitycomm/pages/forums/index/forums_index

projects/activitycomm/pages/forums/detail/forums_detail

projects/activitycomm/pages/forums/cate/forums_cate

projects/activitycomm/pages/forums/add/admin_forums_add

7.4.3 修改app.json 

添加pages

"projects/activitycomm/pages/forums/index/forums_index",

 "projects/activitycomm/pages/forums/detail/forums_detail",

 "projects/activitycomm/pages/forums/cate/forums_cate",

 "projects/activitycomm/pages/forums/add/admin_forums_add",

 "projects/activitycomm/pages/admin/forums/list/admin_forums_list",

 "projects/activitycomm/pages/admin/forums/add/admin_forums_add",

 "projects/activitycomm/pages/admin/forums/edit/admin_forums_edit",

7.4.4  添加js

projects/activitycomm/comm/behavior/forums_index_bh.js

projects\activitycomm\biz\admin_forums_biz.js

projects\activitycomm\biz\forums_biz.js

7.4.5 调试云函数

7.4.6 调试js

7.4.7 调试云数据

7.4.8 效果

7.4.9 问题