微信小程序开发(2)

这次的小程序创建我们会用到腾讯云

使用云服务的开发页面和架构

首次使用云服务的时候控制台会提示一个错误

原因是没有开通云服务

点击云开发会提示你是否要开通云服务、

创建成功后是如下界面

刚刚开通后不能马上使用，等待三分钟左右

• 获取openid

openid是用户的一个唯一标识
点击下面选项，可以测试

第一次使用的话会报错

原因是因为这些所需要的函数是本地的没有上传本地，点击获取openid是调用云端的数据，所以需要上传到云端

首先需要先在云开发控制台新建一个云函数（以下数据是已经上传成功的截图 原本为空）

在文件夹右键选择当前环境

接下来在文件夹右键选择上传云端

成功界面如下

• 快速新建云函数

接下来可以尝试创建云函数
新建文件夹sum创建方式如下

点击测试输出期望值

代码如下：（不要忘记上传云端）

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return {
    sum: event.a + event.b
  }
}

• 前端操作数据库

根据步骤进行操作

（以下数据是测试成功后的界面截图 本空）

接下来可以自己动手尝试实现一个功能

案例一
访问次数查询
新建一个count_demo文件夹 再在count_demo文件夹中新建Page 如下：

在app.js中将新创建的文件放在首位 这样编译出来后直接显示这个文件的界面

实现效果 每编译一次就会增加一次访问次数

count_demo.wxml代码如下：

<!--miniprogram/pages/count_demo/count_demo.wxml-->
<text>您已经访问{{count}}次了</text>

count_demo.js代码如下：

// miniprogram/pages/count_demo/count_demo.js
Page({
/**
 * 统计用户的访问次数
 * 统计的是每个用户的访问次数
 * 将访问次数存储到数据库中
 * 访问次数应该与用户关联
 * 实现逻辑:
 *-用户第- -次访问这个程序，向数据库中新增一 条记录: {用户id:12121212 ,count:1}
 * 用户不是第一次访问，首先从数据库中获取用户的访问次数，然后+1,再保存到数据库中，然后更新
 * 页面上的用户访问次数
 */
  data:{
    count:''
  },
  onLoad(){
    // 查询当前登录用户的访问次数
    // 获取云数据库的引用
    const db = wx.cloud.database()
    //创建更新指令
    const _=db.command
    //查询当前登录用户在counters集合中的数据(小程序如何知道哪条记录时当前登录用户的?）
    db. collection('counters')
    .get()
    .then(res=> {
      // console.log(res)
      if(res. data.length>0) {
        //更新访问次数
        db.collection('counters').doc(res.data[0]._id).update({
          data:{
            count:_.inc(1)
          }
        })
        //在页面上显示访问次数
        this.setData({
          count:++res.data[0].count  
      })
    }else{
        //新增-条访问记录
        db.collection('counters').add( {
          data:{
            count:1
          }
        }).then(res=>{
          this.setData({
            count:1
          })
        })
      }
    })
  }
})

案例二
查询并显示数据列表

首先新建文件夹demp_list
在云开发控制器中新建集合 导入数据（json后缀）

//练习数据
{"_id":{"$oid":"5cac34b31166b06d0cc59b0b"},"title":"小程序简介","description":"小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。"}
{"_id":{"$oid":"5cac34b31166b06d0cc59b0d"},"title":"起步","description":"开发小程序的第一步，你需要拥有一个小程序帐号，通过这个帐号你就可以管理你的小程序。"}
{"_id":{"$oid":"5cac34b31166b06d0cc59b0f"},"title":"小程序代码构成","description":"​在上一章中，我们通过开发者工具快速创建了一个QuickStart项目。你可以留意到这个项目里边生成了不同类型的文件，接下来我们分别看看这4种文件的作用。"}
{"_id":{"$oid":"5cac34b31166b06d0cc59b11"},"title":"小程序宿主环境","description":"我们称微信客户端给小程序所提供的环境为宿主环境。小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能。"}
{"_id":{"$oid":"5cac34b31166b06d0cc59b13"},"title":"小程序协同工作和发布","description":"在这一章我们会把团队的协同工作的注意事项和小程序发布前后涉及的概念和流程做一些介绍。"}
{"_id":{"$oid":"5cac34b31166b06d0cc59b15"},"title":"目录结构","description":"小程序包含一个描述整体程序的app和多个描述各自页面的page。"}
{"_id":{"$oid":"5cac34b31166b06d0cc59b17"},"title":"全局配置","description":"小程序根目录下的app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。"}
{"_id":{"$oid":"5cac34b31166b06d0cc59b19"},"title":"页面配置","description":"每一个小程序页面也可以使用同名.json文件来对本页面的窗口表现进行配置，页面中配置项会覆盖app.json的window中相同的配置项。"}
{"_id":{"$oid":"5cac34b31166b06d0cc59b1b"},"title":"sitemap 配置","description":"小程序根目录下的sitemap.json文件用来配置小程序及其页面是否允许被微信索引。"}
{"_id":{"$oid":"5cac34b31166b06d0cc59b1d"},"title":"框架","description":"小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。"}
{"_id":{"$oid":"5cac34b31166b06d0cc59b20"},"title":"小程序的运行环境","description":"微信小程序运行在三端：iOS（iPhone/iPad）、Android 和 用于调试的开发者工具。"}
{"_id":{"$oid":"5cac34b31166b06d0cc59b22"},"title":"自定义组件","description":"从小程序基础库版本1.6.3开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本1.6.3或更高。"}
{"_id":{"$oid":"5cac34b31166b06d0cc59b25"},"title":"插件","description":"插件的开发和使用自小程序基础库版本1.9.6开始支持。（如果插件包含页面，则需要基础库版本2.1.0。）"}
{"_id":{"$oid":"5cac34b31166b06d0cc59b27"},"title":"小程序框架参考文档","description":"本章为小程序框架配置、框架接口、WXML 和 WXS 等的参考文档。"}
{"_id":{"$oid":"5cac34b31166b06d0cc59b29"},"title":"小程序组件参考文档","description":"本章为小程序原生组件的详细使用说明文档。"}
{"_id":{"$oid":"5cac34b31166b06d0cc59b2c"},"title":"小程序API参考文档","description":"本章为小程序API的详细使用说明文档。"}
{"_id":{"$oid":"5cac34b31166b06d0cc59b2e"},"title":"小程序服务端API参考文档","description":"本章为小程序服务端API的详细使用说明文档。"}
{"_id":{"$oid":"5cac34b31166b06d0cc59b31"},"title":"小程序云开发参考文档","description":"云开发提供了一整套云服务及简单、易用的API和管理界面，以尽可能降低后端开发成本，让开发者能够专注于核心业务逻辑的开发、尽可能轻松的完成后端的操作和管理。"}

需要下载weui-wxss
weui-wxss下载地址
只使用其中的weui.wxss 所放位置如下

样式引入位置：

demo.list.wxml代码如下：

<view class="page">
  <view class="weui-panel weui-panel_access">
    <view class="weui-panel__bd">
      <view class="weui-media-box weui-media-box_text" wx:for="{{dataList}}" wx:key="_id">
        <h4 class="weui-media-box__title">{{item.title}} </h4>
        <view class="weui-media- box__desc">{{item.description}}</view>
      </view>
    </view>
  </view>
</view>

demo_list.js代码如下：

// pages/demo_list/demo_list.js
Page({
  /**
   * 查询数据库中的护具并展示在页面上
   *1)创建集合，并导入数据,为集合分配适当的权限
   *2)页面加载时查询第一页数据
   *3)向上拉动页面，到底部的时候查询下一-页数据
   *4)如果数据库没有更多的数据了，则再次向上拉动时，就不再进行查询了
   */
  data:{
    page_size:10, // 每页显示的记录数量
    page_count:0, //页码,值为0获取的是第一页
    dataList:[]
  },
  onLoad(){
    this.getListData()
  },
  // 分页获取数据
  getListData(){
    const db=wx.cloud.database()
    // 计算skip函数的参数值
    let offset=this. data. page_count*this.data.page_size
    db.collection('demo_list').skip(0).limit(this.data.page_size).get()
    .then(res=>{
      this.setData({
        dataList:res.data
      })
    })      
  },
   /**
    *页面上拉触底事件的处理函数
    */
    onReachBottom: function (){

    }
})

最后样式如下