精华内容
下载资源
问答
  • 云开发

    千次阅读 2019-06-09 13:31:54
    云开发模型云用开发华为云解决方案 云用开发 云这两年是一个火爆的技术,那么如何开发云产品。从技术角度上讲,技术没有很大的革新,只是开拓了应用方式,因此要介入云产品开发,了解云的构建模式和一定的开发模型...

    云用开发

    云这两年是一个火爆的技术,那么如何开发云产品。从技术角度上讲,技术没有很大的革新,只是开拓了应用方式,因此要介入云产品开发,了解云的构建模式和一定的开发模型即可。当然核心部分,还是有不少技术挑战。

    我的一点云理解:
    1、服务器从私有变为共有
    2、共享经济带来性的业务模式,有实力的公司把核心技术打包,搭建平台,给有产品能力、核心技术不强的小型公司快速落地产品。
    3、书业有专攻,公共云的存在促进领域行业的快速发展和资源的充分利用。

    在这里插入图片描述

    华为云解决方案

    服务器搭建隔离环境:kubernetes + ISTIO
    在这里插入图片描述
    新老系统数据共享与方案迁移:打破数据孤岛
    在这里插入图片描述
    云端解决方案,促进产品快速落地
    在这里插入图片描述
    5G解决方案,物联网形态
    在这里插入图片描述
    特定场景解决方案,成熟度高
    在这里插入图片描述

    展开全文
  • 微信小程序云开发(数据库)

    万次阅读 多人点赞 2018-09-21 15:29:21
    开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速...

    开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。

    云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。

    目前提供三大基础能力支持:

               1、云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码

               2、数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库

               3、存储:在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理

    具体的可以去小程序文档上查看,下面用一个登录注册的案例来演示小程序云开发数据库的运用

    注册

    在创建的时候,要在点下一步的时候,调数据库来看用户名有没有重复的。在点击同意的时候来调用数据库,然后把所有的判断放到下一步来判断。所有条件都满足就将用户名和密码放到全局变量中。

    var app = getApp();
    Page({
      data: {
        userName: '',
        userPassword: '',
        userPasswordAgain: '',
        checkbox: false,
        repetition: false
      },
      // 返回主页面
      backHomeTap: function() {
        wx.switchTab({
          url: '../index/index',
        })
      },
      // 绑定
      bindingTap: function () {
        wx.redirectTo({
          url: '../login/login',
        })
      },
      // 用户名
      userNameInput: function(e) {
        this.setData({
          userName: e.detail.value
        });
      },
      // 密码
      userPasswordInput: function(e) {
        this.setData({
          userPassword: e.detail.value
        });
      },
      // 再次输入密码
      userPasswordAgainInput: function(e) {
        this.setData({
          userPasswordAgain: e.detail.value
        });
      },
      // 同意
      checkboxChange: function() {
        if (this.data.checkbox === false) {
          this.setData({
            checkbox: true
          })
        } else {
          this.setData({
            checkbox: false
          })
        }
        var that = this;
        var userName = this.data.userName;
        // 初始化云
        wx.cloud.init({
          env: 'wubaib-9543f7',
          traceUser: true
        });
        // 初始化数据库
        const db = wx.cloud.database();
        const _ = db.command;
        db.collection('userInformation').where({
          userName: _.eq(userName)
        }).get({
          success: function (res) {
            if (res.data.length === 1) {
              that.setData({
                repetition: true
              })
            }
          }
        })
      },
      // 下一步,完善个人信息
      perfectInforTap: function() {
        var userName = this.data.userName;
        var userPassword = this.data.userPassword;
        var checkbox = this.data.checkbox;
        var userPasswordAgain = this.data.userPasswordAgain;
        var name = /^[A-Za-z0-9\u4e00-\u9fa5]+$/;
        var repetition = this.data.repetition;
        if (userName === '') {
          wx.showToast({
            title: '请输入用户名',
            icon: 'none',
            duration: 2000,
            mask: true
          })
        } else if (!name.test(userName)) {
          wx.showToast({
            title: '用户名格式不正确',
            icon: 'none',
            duration: 2000,
            mask: true
          })
        } else if (repetition === true) {
          wx.showToast({
            title: '用户名已存在',
            icon: 'none',
            duration: 2000,
            mask: true
          })
        } else if (userPassword === '') {
          wx.showToast({
            title: '请输入密码',
            icon: 'none',
            duration: 2000,
            mask: true
          })
        } else if (userPassword.length < 6) {
          wx.showToast({
            title: '密码最少6位',
            icon: 'none',
            duration: 2000,
            mask: true
          })
        } else if (userPassword !== userPasswordAgain) {
          wx.showToast({
            title: '两次密码输入不一致',
            icon: 'none',
            duration: 2000,
            mask: true
          })
        } else if (checkbox === false) {
          wx.showToast({
            title: '请选中已阅读',
            icon: 'none',
            duration: 2000,
            mask: true
          })
        } else {
          wx.redirectTo({
            url: 'perfectInfor/perfectInfor',
          })
          // 保存用户名和密码
          app.appData.account = {
            userName: userName,
            userPassword: userPassword
          }
        }
      }
    })

    在完善信息的时候获取所有的变量(用户名和密码也在内),然后在点击下一步完成按钮将数据上传到数据库。

    ​
    var app = getApp();
    Page({
      data: {
        userName: '',
        userPassword: '',
        phone: '',
        realName: '',
        card: '',
        email: '',
      },
      // 返回主界面
      backHomeTap: function() {
        wx.switchTab({
          url: '../../index/index',
        })
      },
      // 手机号
      phoneInput: function(e) {
        this.setData({
          phone: e.detail.value
        });
      },
      // 真实姓名
      nameInput: function(e) {
        this.setData({
          realName: e.detail.value
        });
      },
      // 身份证
      cardInput: function(e) {
        this.setData({
          card: e.detail.value
        })
      },
      // email
      emailInput: function(e) {
        this.setData({
          email: e.detail.value
        })
      },
      // 下一步完成
      registerSuccessTap: function() {
        var phone = this.data.phone;
        var realName = this.data.realName;
        var card = this.data.card;
        var email = this.data.email;
        var userName = this.data.userName;
        var userPassword = this.data.userPassword;
        var phonereg = /^1[345789]\d{9}$/;
        var namereg = /^[\u4E00-\u9FA5]+$/;
        var cardreg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/;
        var emailreg = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
        var that = this;
        if (phone === '') {
          wx.showToast({
            title: '请输入手机号',
            icon: 'none',
            duration: 2000,
            mask: true
          });
        } else if (!phonereg.test(phone)) {
          wx.showToast({
            title: '请输入正确的手机号',
            icon: 'none',
            duration: 2000,
            mask: true
          })
        } else if (!namereg.test(realName)) {
          wx.showToast({
            title: '请输入正确的名字',
            icon: 'none',
            duration: 2000,
            mask: true
          })
        } else if (card === '') {
          wx.showToast({
            title: '请输入身份证',
            icon: 'none',
            duration: 2000,
            mask: true
          })
        } else if (!cardreg.test(card)) {
          wx.showToast({
            title: '请输入正确的身份证',
            icon: 'none',
            duration: 2000,
            mask: true
          })
        } else if (email === '') {
          wx.showToast({
            title: '请输入邮箱',
            icon: 'none',
            duration: 2000,
            mask: true
          })
        } else if (!emailreg.test(email)) {
          wx.showToast({
            title: '请输入正确的邮箱',
            icon: 'none',
            duration: 2000,
            mask: true
          })
        } else {
          // 初始化云
          wx.cloud.init({
            env: 'wubaib-9543f7',
            traceUser: true
          });
          // 初始化数据库
          const db = wx.cloud.database();
          db.collection('userInformation').add({
            // data 字段表示需新增的 JSON 数据
            data: {
              realName: realName,
              userName: userName,
              userPassword: userPassword,
              phone: phone,
              email: email,
              card: card
            },
            success: function(res) {
              // res 是一个对象,其中有 _id 字段标记刚创建的记录的 id
              console.log(res);
              console.log(res.errMsg);
            }
          })
        }
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function() {
        this.setData({
          userName: app.appData.account.userName,
          userPassword: app.appData.account.userPassword
        })
      },
    })
    
    ​

    登录

    在登录页面,先获取用户输入的用户名和密码。在点击登录的时候,先根据userName调数据库的密码和用户输入的密码是否相等。如果相等将用户的信息保存到全局变量中。

    ​
    var app = getApp();
    Page({
      data: {
        bindName: '',
        bindPassword: '',
        isChecked: false,
        userName: '',
        phone: '',
        realName: '',
        card: '',
        email: '',
        userId: ''
      },
      // 点击注册账号
      registerTap: function() {
        wx.redirectTo({
          url: '../register/register'
        })
      },
      // 获取用户名
      bindNameInput: function(e) {
        this.setData({
          bindName: e.detail.value
        })
        var that = this;
        if (that.data.bindName.length !== 0 && that.data.bindPassword.length !== 0) {
          this.setData({
            isChecked: true
          })
        } else if (that.data.bindName.length === 0) {
          this.setData({
            isChecked: false
          })
        }
      },
      // 获取密码
      bindPasswordInput: function(e) {
        this.setData({
          bindPassword: e.detail.value
        })
        var that = this;
        if (that.data.bindName.length !== 0 && that.data.bindPassword.length !== 0) {
          this.setData({
            isChecked: true
          })
        } else if (that.data.bindPassword.length === 0) {
          this.setData({
            isChecked: false
          })
        }
      },
      // 点击登录
      bindingSuccess: function() {
        var that = this;
        var bindName = that.data.bindName;
        var bindPassword = that.data.bindPassword;
        if (bindName.length !== 0 && bindPassword.length !== 0) {
          // 初始化云
          wx.cloud.init({
            env: 'wubaib-9543f7',
            traceUser: true
          });
          // 初始化数据库
          const db = wx.cloud.database();
          db.collection('userInformation').where({
            userName: bindName
          }).get().then(res => {
            console.log(res.data);
            if (res.data[0].userPassword === bindPassword) {
              console.log("登录成功");
              // 保存手机号,真实姓名,身份证号,邮箱 保存用户名
              that.setData({
                userName: res.data[0].userName,
                phone: res.data[0].phone,
                realName: res.data[0].realName,
                card: res.data[0].card,
                email: res.data[0].email,
                userId: res.data[0]._id
              })
              app.appData.userinfo = {
                phone: that.data.phone,
                realName: that.data.realName,
                card: that.data.card,
                email: that.data.email
              }
              app.appData.account = {
                userName: that.data.userName
              }
              app.appData.userId = {
                userId: that.data.userId
              }
              wx.switchTab({
                url: '../personalCenter/personalCenter',
              })
            } else {
              wx.showToast({
                title: '用户名或密码错误',
                icon: 'none',
                duration: 2000
              })
            }
          })
        }
      },
    })
    
    ​

    登录WXML

    <view class='phoneNumberContainer'>
      <input placeholder='用户名' maxlength='11' bindinput="bindNameInput"></input>
    </view>
    <view class='passwordContainer'>
      <input placeholder='密码' password="true" bindinput="bindPasswordInput"></input>
    </view>
    <view class="{{isChecked?'bindingChecked':'bindingNormal'}}" bindtap='bindingSuccess'>立即登录</view>
    <view class='registerContainer' bindtap='registerTap'>注册账号</view>

    注册第一步的WXML

    <!--返回主页  -->
    <view class='backHome' bindtap='backHomeTap'>
      <image src='/images/homeIcon.png' class='backHomeImg'></image>
    </view>
    <!--头部  -->
    <view class='headerContainer'>
      <!--创建账户  -->
      <view class='headerListContainer headerListActive'>
        <view class='headerListView'>1</view>
        <text class='headerListText'>创建账户</text>
      </view>
      <!--完善个人信息  -->
      <view class='headerListContainer'>
        <view class='headerListView'>2</view>
        <text class='headerListText'>完善个人信息</text>
      </view>
      <!--注册成功  -->
      <view class='headerListContainer'>
        <view class='headerListView'>3</view>
        <text class='headerListText'>注册成功</text>
      </view>
      <view class='transverseLineLeft'></view>
      <view class='transverseLineright'></view>
    </view>
    <view class='mainContainer'>
      <!--用户名  -->
      <view class='mainListContainer'>
        <view class='mainListText'>用户名</view>
        <input class='mainListInput' placeholder='请输入数字,字母或中文' maxlength='25' bindinput='userNameInput'></input>
      </view>
      <!--密码  -->
      <view class='mainListContainer'>
        <view class='mainListText'>密码</view>
        <input class='mainListInput' placeholder='长度6~14位' password='true' maxlength='14' bindinput='userPasswordInput'></input>
      </view>
      <!--确认密码  -->
      <view class='mainListContainer'>
        <view class='mainListText'>确认密码</view>
        <input class='mainListInput' placeholder='请再次输入密码' password='true' maxlength='14' bindinput='userPasswordAgainInput'></input>
      </view>
    </view>
    <!--agree  -->
    <view class='agreeContainer'>
      <checkbox class='agreeCheckbox' checked="{{check}}" bindtap="checkboxChange"/>
      <text>我已阅读并接受</text>
      <text class='clause'>《用户注册条款》</text>
    </view>
    <!--nextButton  -->
    <view class='nextButton' bindtap='perfectInforTap'>下一步,完善个人信息</view>
    <!--binding  -->
    <view class='bindingContainer'>
      <text>已有账号</text>
      <text class='binding' bindtap='bindingTap'>请绑定</text>
    </view>

    注册第二步WXML

    <!--返回主页  -->
    <view class='backHome' bindtap='backHomeTap'>
      <image src='/images/homeIcon.png' class='backHomeImg'></image>
    </view>
    <!--头部  -->
    <view class='headerContainer'>
      <!--创建账户  -->
      <view class='headerListContainer headerListOldActive'>
        <view class='headerListView'>1</view>
        <text class='headerListText'>创建账户</text>
      </view>
      <!--完善个人信息  -->
      <view class='headerListContainer headerListActive'>
        <view class='headerListView'>2</view>
        <text class='headerListText'>完善个人信息</text>
      </view>
      <!--注册成功  -->
      <view class='headerListContainer'>
        <view class='headerListView'>3</view>
        <text class='headerListText'>注册成功</text>
      </view>
      <view class='transverseLineLeft'></view>
      <view class='transverseLineright'></view>
    </view>
    <!--main  -->
    <view class='mainContainer'>
      <!--手机  -->
      <view class='mainListContainer'>
        <view class='mainListText'>手机</view>
        <input class='mainListInput' placeholder='请输入手机号码' maxlength="11" bindinput='phoneInput'></input>
      </view>
      <!--真实姓名  -->
      <view class='mainListContainer'>
        <view class='mainListText'>真实姓名</view>
        <input class='mainListInput' placeholder='请输入真实姓名' maxlength='25' bindinput='nameInput'></input>
      </view>
      <!--证件类型  -->
      <view class='mainListContainer'>
        <view class='mainListText'>证件类型</view>
        <view class='cardText'>中华人民共和国居民身份证</view>
      </view>
      <!--证件号码  -->
      <view class='mainListContainer'>
        <view class='mainListText'>证件号码</view>
        <input class='mainListInput' type='idcard' placeholder='请输入身份证号码' maxlength="18" bindinput='cardInput'></input>
      </view>
      <!--邮箱  -->
      <view class='mainListContainer'>
        <view class='mainListText'>邮箱</view>
        <input class='mainListInput' placeholder='请输入常用的邮箱地址' bindinput='emailInput'></input>
      </view>
    </view>
    <!--nextButton  -->
    <view class='nextButton' bindtap='registerSuccessTap'>下一步,完成</view>

    好多人问我要源码,我就不一个一个发了。要源码的自己git下载吧

    下载地址:https://github.com/wubaibin/wx_yunkaifa.git

    展开全文
  • 小程序云开发基本操作(附开源云开发项目) 欢迎点击: 个人官网博客. github源码: 多功能记账本 云数据库基本操作(增删改查,链表) 云开发极大的方便了前端开发者,是前端工程师的一个福音,没事就赶快学起来吧! ...

    云数据库,云函数,云储存(附开源云开发项目)

    欢迎点击: 个人官网博客.
    github源码: 多功能记账本

    扫码体验:

    在这里插入图片描述

    云数据库基本操作(增删改查,链表)

    云开发极大的方便了前端开发者,是前端工程师的一个福音,没事就赶快学起来吧!

    注意:云数据库获取数据一次最多20条,如果要不受限制,则调用云函数进行操作
        const db=wx.cloud.database() 连接云数据库
        const teachers=db.collection('teachers') 拿到teachers表(模型)
    
    -----------------------------------------------增
        teachers.add({
          data:{ name:''}
        }) 增加
    -----------------------------------------------删除
        teachers.doc('b1a52c595fb4d8770002aede69836369').remove() 查询到指定id并删除
        teachers.where({ name:''}).remove()  批量删除
        
    ------------------------------------------------改
        teachers.doc('b1a52c595fb4d8770002aede69836369').update({
          data:{ name:''}
        }) 查询到指定id并更新
    
        teachers.where({ name:''}).update({
          data:{ name:''}
        }) 批量更新
    -------------------------------------------------查
        teachers.doc('b1a52c595fb4d8770002aede69836369') 查询到指定id
        teachers.get() 查询全部
        teachers.where({ name:''}).get()  条件查询
        teachers.orderBy('age', 'desc').get()  条件查询升序  ---asc倒
        teachers.limit(10).get()  条件查询10条
        teachers.skip(10).limit(10).get()  查询10条后的10-----------------------------------------------  链表
    
        const db = cloud.database()  //-----------------
        db.collection('orders').aggregate()  //父项表名
          .lookup({
            from: 'books',         //子项表名
            localField: 'book',      //父项要匹配的字段
            foreignField: 'title',    //子项要匹配的字段
            as: 'bookList',          //放在父项那个字段里面
          })
          .end()
          .then(res => console.log(res))
          .catch(err => console.error(err))
    
    
    

    云函数

    // 云函数入口文件
    const cloud = require('wx-server-sdk')
    cloud.init({
      env: 'demo-4cb91'
    })
    
    // 云函数入口函数
    exports.main = async (event, context) => {
      const wxContext = cloud.getWXContext()
      const db =cloud.database()
      const teachers = db.collection('teachers')  操作云数据库
      let result= teachers.get().then(res => {
          return res
        })
        .catch(err => {
          return err
        })
        return result
    }
    

    调用云函数

     wx.cloud.callFunction({
          // 云函数名称
          name: 'add',
          // 传给云函数的参数
          data: {
            name,
            pwd
          },
        })
        .then(res => {
          console.log(res) // 3
        })
        .catch(console.error)
    

    云存储基本操作

        wx.chooseImage  选择图片
        wx.chooseVideo 选择视频
        wx.chooseMessageFile  选择文件
    
        wx.openDocument 打开文档 如excel
    
        wx.cloud.uploadFile  上传所选择的文件
        wx.cloud.downloadFile  下载
    例如:
       上传图片
        wx.chooseImage({
          success: (res) => {
            console.log(res.tempFilePaths[0])
            wx.cloud.uploadFile({
              cloudPath: 'example.png',
              filePath: res.tempFilePaths[0], // 文件路径
              success: res => {
                console.log(res)
              },
              fail: err => {
                // handle error
              }
            })
          },
          complete:()=>{
    
          }
        })
    
    展开全文
  • 我们在开发小程序之前,首先需要安装小程序开发者工具,今天就来教大家安装小程序开发者工具。 1-1,其实很简单,只需要进入小程序官网,然后点击工具,如下图所示。 当然了,也可以直接通过下面链接去下载 ...

    写在前面

    1,讲解视频

    视频课我会在B站免费提供给大家,欢迎关注,欢迎三连。
    https://space.bilibili.com/419474640/video

    2,配套笔记

    配套笔记会在csdn上免费给到大家,欢迎关注,笔记会持续更新。
    https://blog.csdn.net/qiushi_1990

    3,支持石头哥😊

    3-1,源码和配套资源获取

    目前源码和配套的一些资源暂时不免费,如果有需要的同学可以私聊石头哥,拿米来换。

    3-2,笔记电子书

    笔记我也有整理一套电子书,大家也可以私聊石头哥获取电子书版的配套笔记。电子书笔记方便后期查询知识点。

    4,问题解答(●’◡’●)

    另外石头哥提供配套解答服务。当然了,知识付费时代石头哥解答是要米的,毕竟石头哥精力有限,石头哥也是要吃面包的。石头哥有推出包月,包年解答服务。你在学习过程中有任何问题,或者工作中遇到任何编程问题,都可以来找石头哥
    石头哥目前可以解答如下问题

    • 小程序方面的问题
    • 云开发方面的问题
    • Java,springboot,Javaweb方面的问题
    • 毕设方面的问题
    • 安卓app开发方面的问题
    • html+css+JavaScript方面的问题
    • 前端开发的问题
    • 后端开发的问题
    • 面试找工作方面的问题

    一,认识小程序云开发

    1-1,云开发简介

    • 小程序·云开发是微信团队联合腾讯云推出的专业的小程序开发服务。

    • 开发者可以使用云开发快速开发小程序、小游戏、公众号网页等,并且原生打通微信开放能力。

    • 开发者无需搭建服务器,可免鉴权直接使用平台提供的API进行业务开发
      小程序

    • 云开发又简称tcb,是微信官方给我们提供的基于腾讯云的云服务器。目前云开发包含:云数据库,云函数,云存储,云调用。后面章节会具体给大家讲解这几个。

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html

    1-2,云开发和传统服务器对比

    云开发相对于传统服务器的优势如下表

    通过上面的对比,我们可以看出,如果你想快速创建一个小程序的后台,用云开发是不错的选择。

    二,微信开发者工具的安装与使用

    工欲善其事必先利其器,我们在开发小程序之前,首先需要安装小程序开发者工具,今天就来教大家安装小程序开发者工具。

    2-1,其实很简单,只需要进入小程序官网,然后点击工具,如下图所示。



    当然了,也可以直接通过下面链接去下载
    https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

    2-2,下载安装包如下


    不管你是window还是mac电脑,只需要双击安装包实现安装即可。

    等待安装即可

    安装完成

    2-3,进入开发者工具


    第一次进入时,如下

    点击上图的加号,我们来创建一个新项目

    完成上图的配置后,点击新建。即可创建项目。创建好以后的项目如下图所示。

    这样我们就完成了小程序开发者工具的安装了,后面我们就可以开始小程序的代码编写了。

    三,注册小程序

    我们前面虽然可以用测试号创建小程序,但是测试号有很多功能会受限,比如我们接下来要讲的云开发,必须是注册小程序后才可以使用,所以今天我们就来讲讲小程序的注册.

    其实官方给的注册步骤很详细了


    官方注册文档:https://developers.weixin.qq.com/miniprogram/introduction/

    微信小程序注册地址:https://mp.weixin.qq.com/
    进去以后点击立即注册

    进入注册页面时,跟着提示一步步来就可以了

    注意点:

    • 如果只是学习的话,注册个人小程序即可.
    • 如果想商用,想使用微信支付,取用户手机号等复杂功能,可以注册企业小程序,不过企业小程序必须有营业执照才可以注册
    • 一个邮箱只能注册一个小程序
    • 一个身份证可以注册5个,个人小程序
    • 一个企业的营业执照可以注册50个企业小程序

    四,云开发环境的创建与初始化

    今天我们就来正式的创建自己的第一个云开发项目,在创建云开发之前,有下面几个注意事项

    • 1,必须注册小程序后才可以开通云开发
    • 2,一个小程序可以创建两个云开发环境

    4-1,创建一个初始项目

    我们要开通云开发服务,必须先要进入小程序开发者工具才可以。

    和创建普通小程序一样,如上图所示,需要注意的就是这里必须要填写自己的appid,不可以用测试号. appid的获取如下图所示.

    如果你不使用自己的appid创建项目,就会出现下面的问题,所以一定要先去注册一个小程序,然后用自己的appid。

    由于云开发官方更新的太快,有些同学可能会遇到下面这样的问题


    没有 不使用云服务 选型。这个时候该怎么办呢。石头哥也已经更新课程,给大家提供的解决方案。

    4-2,没有“不使用云服务”选型解决方案(选看)

    如果你出现上面的问题,再看这节,如果没出现这样的问题,直接跳过就行。

    我在配套资料里为大家准备了一个空白项目的模板。大家只需要把这个模板下载到桌面,并解压。

    然后点击导入,把项目导入即可。

    然后如下所示,记得appid换成你自己的。

    4-3,开通云开发

    • 1,点击下图箭头所示,如果你第一步创建项目时,没有使用自己的appid,这里不会有下图箭头所示的云朵.
    • 2,给云开发环境取名

      等待创建

      创建成功
    • 3,获取云开发环境id

    4-4,初始化云开发环境(***重要)

    在app.js里写入环境id,注意这里要用你自己的云开发环境id

    • 初始化云开发环境前,先去云开发控制台,拿到云开发环境id,如下图

      这里的环境id建议直接复制,不要手写,很容易写错。

    • 拿到环境id以后,就去app.js里做云开发环境初始化,如下

    用时候云开发创建好以后,初始化可能需要一点时间,所以如果这里初始化有报错,记得关闭开发者工具,等几分钟再重新打开即可.

    五,云开发~云数据库

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/init.html

    5-1,在数据库里新建集合(数据表)

    我们这里以新建一个商品列表为例

    5-2,数据库权限管理

    要想让用户查询到我们创建的商品数据,需要把权限改为所有用户可读

    5-3,数据库的增删改查

    5-3-1,查询 get()

    • 传统写法
    • ES6简洁写法

      推荐第二种写法

    5-3-2,条件查询 where()

    5-3-3,查询单条数据doc()

    doc是用来查询单条数据的。比如商品详情页。
    doc里面用到的参数就是我们数据里的_id字段

    5-3-4,添加数据 add()

    通过add可以实现数据的添加,

    5-3-5,更新数据update()

    修改数据库里已存在的数据,结合doc进行修改单条数据

    5-3-6,删除数据remove()

    删除数据,结合doc删除单条数据

    5-4,增删改查综合案例

    • 1,能查看商品列表
    • 2,更动态添加商品
    • 3,能进入商品详情页
    • 4,能删除某个商品
    • 5,能修改某个商品的价格

    5-4-1 列表跳详情 data-

    • 1,在wxml里定义data- 要绑定的数据
    • 2, 在js页面里的点击方法里拿到绑定的数据
    • 比如打印结果如下
      在这里插入图片描述

    5-4-2,列表跳详情并携带商品id

    • 1,列表跳页到详情页
    • 2,拿到列表跳页时携带的id数据

    5-4-3,查询商品列表

    5-4-4,添加商品并刷新商品列表

    5-4-5,更新商品数据

    用户输入新价格,调用update方法进行更新数据

    我们更新成功的时候,会有如下所示的日志打印。

    只有stats里的updated是1的时候,才代表成功的更新了一条数据。
    如果这条商品不是你创建的,当你对这条商品做更新操作时,打印的updated就是0。

    这个时候代表没有更新成功。这是因为操作时的权限问题,要解决这个问题,就要借助云函数了,这里我们先放在这里,在后面云函数章节会做具体讲解。

    5-4-6,弹窗提示确认是否删除

    用户删除数据是一个危险操作,所以操作之前最好给用户一个友好提示。
    官方弹窗文档:https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html

    5-4-7,删除商品

    5-4-8,更新和删除时的权限问题

    如果这条商品不是你创建的,当你对这条商品做删除或者更新操作时,虽然也会返回成功,但是可以看到我们更新或者删除的条数是0。

    其实这个时候也意味着没有更新或者删除成功,这里是因为操作权限的问题,因为这条数据不是你创建的。所以你只能对这条数据做查询操作,而不能做修改和删除操作。要想解决这个问题,就要借助云函数了。后面云函数讲解的部分,我会做具体讲解的。

    我们还是先接着学习数据库操作的高级操作

    5-6,常用快捷键

    我们在开发时为了提高代码编写效率,通常会使用一些快捷键。我们小程序开发工具里常用的快捷键如下。
    设置—》快捷键设置
    在这里插入图片描述
    然后点击如下快捷键即可查看所有的快捷键

    如果感觉默认的快捷键不喜欢,可以自己重新设置快捷键。由于自带的快捷比较多,我这里不一一列举了,我把一些常用的快捷键拿出来给大家大致讲一讲,我这里以window电脑为例,如果你mac电脑,可以自己去看下开发者工具默认的快捷键。多看几遍把常用的记住就行了。

    快捷键组合 描述
    Ctrl+a 全选
    Ctrl+c 复制选中内容
    Ctrl+v 粘贴复制的内容
    Ctrl+z 撤销当前编辑
    Ctrl+s 保存并编译项目
    Ctrl+b 重新编译项目
    Ctrl+x 截切选中的内容
    Ctrl+/ 添加注释
    Ctrl+Shift+k 删除当前行
    Ctrl+Shift+f 全局搜索
    Ctrl+f 当前页面内搜索
    Ctrl+Shift+h 全局搜索并替换文本
    Ctrl+h 当前页面内搜索并替换文本
    Shift+Alt+F 格式化代码
    Shift+Alt+⬆ 向上复制当前行
    Shift+Alt+⬇ 向下复制当前行
    Alt+⬆ 把当前行向上移动一行
    Alt+⬇ 把当前行向下移动一行

    有的电脑上快捷键可能会有细微差距,以开发者工具默认自带的快捷键为准。

    5-7,数据库排序orderBy

    orderBy方法在做排序的时候,接受两个参数

    • 1,根据那个字段排序
    • 2,排序规则(升序或者降序)。升序用asc,降序用desc

    如我们根据商品价格从低到高升序排列

    如我们根据商品价格从高到低降序排列

    5-8,返回指定条数的数据limit

    limit用来指定查询结果集数量上限,比如我们有100条数据,只想返回前20条,我们可以通过limit(20)来指定只返回20条数据。

    例如,只返回3条数据的写法如下

    • 注意:limit 在小程序端默认及最大上限为 20,在云函数端默认及最大上限为 1000

    5-9,分页方法skip

    skip指定查询返回结果时从指定序列后的结果开始返回,常用于分页。比如我们有100条数据,想从第10条开始返回数据,可以通过skip(10)来实现

    • skip结合我们上面学的limit方法可以实现分页效果

    比如我们有100条数据,每次返回20条数据。那么就可以分5页返回。

    • 第1页 limit(20).skip(0)
    • 第2页 limit(20).skip(20)
    • 第3页 limit(20).skip(40)
    • 第4页 limit(20).skip(60)
    • 第5页 limit(20).skip(80)

    5-10,Command数据库操作符

    我门上面学完了数据库的增删改查,但是这些都是最基础最简单的操作,如果我们想实现复杂的数据查询操作,该怎么办呢
    比如

    • 查询价格大于100的商品?
    • 查询年龄小于18岁的学生?
    • 如何同时修改多条数据?
    • 如何同时删除多条数据?

    我们如果想实现上面这些复杂的操作,就需要用到数据库里的 Command数据库操作符,就是下面这位

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/Command.html

    5-10-1,gt查询大于指定值的数据

    比如查询价格大于5的所有商品

    5-10-2,gte查询大于等于指定值的数据

    比如查询大于等于5元的商品

    5-10-3,lt查询小于指定数值的数据

    比如查询价格小于5的所有商品

    5-10-4,lte查询小于等于指定数值的数据

    比如查询价格小于等于5元的所有商品

    5-10-5,and同时满足多个条件的查询

    比如查询价格大于5小于10元的所有商品

    六,云开发~云函数

    6-1,认识云函数

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions.html

    我们先来看下官方给出的云函数简介

    其实通俗来讲,云函数也是运行在服务器上的,只不过和我们传统开发语言相比。微信官方为我们提供的傻瓜式的一键部署。也就是说你只需要把心思花在业务逻辑代码的编写上即可。无需关心写好如何部署,无需关心安全问题,无需关心鉴权问题。

    我们下面以获取openid为例,来看看云函数,php,Java的实现对比

    • php获取用户openid

      如果用php来获取openid必须经历下面几步
    • 1,去小程序后台拿到appid和appSecret
    • 2,请求微信的对应接口
    • 3,获取数据后进行解码
    • 4,购买服务器,配置服务器
    • 5,购买域名,域名备案,配置https
    • 6,部署php代码到服务器
    • 7,小程序端调用php接口

    Java获取openid和上面的php步骤一样,也是需要上面7步。而我们用云函数获取openid呢,就只需要简单的3步就行了,代码量也能显著减少

    6-1-1,云函数获取openid

    用云函数的话,只需要3步

    • 1,编写云函数
    • 2,一键部署云函数
    • 3,调用云函数

    来看下云函数代码,只需要10行代码,即可轻松搞定

    6-2,云函数的优势

    我们用云函数和上一章的云数据库进行下对比

    操作 云函数 云数据库
    返回数据上限 100条 20条
    更新数据 都可以更新 只有自己创建的才可以更新
    删除数据 都可以删除 只有自己创建的才可以删除
    运行环境 运行在云端Node.js环境 运行在小程序本地
    实现功能丰富度 非常丰富 只能实现数据库增删改查
    • 来看下官方文档是如何描述云函数的
      云函数属于管理端,在云函数中运行的代码拥有不受限的数据库读写权限和云文件读写权限。需特别注意,云函数运行环境即是管理端,与云函数中的传入的 openId 对应的微信用户是否是小程序的管理员 / 开发者无关。

    6-3,云函数调用演示

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/functions/Cloud.callFunction.html

    6-3-0,初始化云函数的环境

    • 1,创建一个文件夹cloud和pages平行
      在这里插入图片描述
    • 2,在project.config.json里面配置云函数所在目录为cloud
      在project.config.json里面添加如下配置
      然后点击保存,我们的cloud文件夹前面就有一个云朵

      就代表我们云函数初始化成功啦。
    • 新一个云函数
      在这里插入图片描述
    • 如果只创建一个云函数的时候,会出现下面的问题。

      解决方案:只需要在cloud文件夹下新建一个空白文件即可。

    6-3-1,云函数获取openid

    调用云函数有两种写法

    • 1,传统的success和fail
    • 2,用promise写法then和catch

    6-3-2,数据的导入和导出

    • 数据导出,做数据备份

      比如导入为json数据如下
    • 数据导入,为了快速的大量的创建一些数据。
      为了方便付费用户,我这里提前准备好了108条数据,付费用户直接去下载即可

      把下载好的这108条数据的json文件,导入到数据库如下

    6-3-3,云函数获取数据

    注意:云函数只要有变动,就要重新部署,否则云函数不生效。

    遇到了一个问题,如下

    出现原因:如果你有两个云开发环境,偶尔会出现上图所示的问题。
    解决问题:有两种

    • 1,在云函数里指定你要使用那个云开发环境
    • 2,使用DYNAMIC_CURRENT_ENV常量 (提倡使用这个)

      我们这里会和小程序里直接调用数据库的查询进行下对比

    6-3-4,云函数修改数据

    本地小程序直接调用数据库修改会有问题

    • 只能修改自己创建的数据,别人创建的数据,就没有办法修改了。

    • 如何解决呢? 用云函数来修改就可以解决这个问题啦。

    • 1,先创建云函数update0129

    • 2,调用云函数就行修改

    6-3-5,云函数删除数据

    • 1,创建一个删除商品的云函数remove0129
    • 2,调用这个云函数进行删除操作

    6-3-6,提交数据到云函数

    • 1,创建云函数,并部署
    • 2,调用云函数

    6-4,使用云函数常见问题

    6-4-1,云函数里面没有初始化环境变量


    解决方案如下:
    使用DYNAMIC_CURRENT_ENV

    代码片段

    cloud.init({
      env: cloud.DYNAMIC_CURRENT_ENV 
    })
    

    七,云开发~云存储

    首先来看下官方对云存储的介绍:
    官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage.html

    说白了,云存储就是可以用来存储视频,音频,图片,文件的一个云存储空间。如果你的小程序需要用到视频播放,音频播放,图片展示,文件上传与下载功能,就可以用到我们的云存储了。

    • 使用云存储来存储文件时,文件名的命名有一些规则,建议看一下。

    7-1,云开发控制台管理文件

    控制台也可以很方便的管理文件。

    7-2,上传图片到云存储

    我们上传图片之前需要先选择图片,所以这里用到一个图片选择的功能

    对应的官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html

    然后调用文件上传的api接口即可

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/storage/uploadFile/client.uploadFile.html

    7-3,给商品列表加商品图片

    我们既然已经学完图片上传功能了,那么我们就可以改造下我们之前的商品列表了,给我们的商品列表添加商品图片。

    7-4,上传视频到云存储

    上传视频之前同样需要先选择视频,选择视频的代码如下

    对应的官方文档如下:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html

    选择好视频以后,同样是调用文件上传api,因为视频也是一个文件。

    7-5,上传word,excel文件到云存储

    7-5-1,上传之前先选择文件

    选择文件的时候记得把type设置为file

    对应的官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseMessageFile.html

    • 这里有一点需要注意
      在电脑模拟器上是选择电脑上的文件,在手机上运行小程序进行选择文件时是选择你聊天记录里的文件。

    7-5-2,上传文件

    在上面选择好文件以后,我们还是要调用uploadFile进行文件上传

    7-6,下载文件

    使用wx.cloud.downloadFile下载文件
    https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-client-api/storage/downloadFile.html

    7-7,下载并打开word,excel,pdf

    使用wx.openDocument打开文件
    https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html

    八,列表的下拉刷新

    8-1,开启页面下拉刷新

    我们需要在app.json获取页面对应的json里设置enablePullDownRefresh属性为true来开启下拉刷新。



    由于我们的刷新动画默认是白色圆点,所以还要在json里设置页面背景色才可以看到动画。

    8-2,在Page的onPullDownRefresh里监听刷新


    在page里的onPullDownRefresh方法里监听下拉刷新

    8-3,用户下拉刷新时请求最新数据

    8-4,数据请求成功后停止刷新

    我们在下拉刷新时,刷新动画一般很久才结束,正常情况下应该是数据请求成功后就结束刷新动画。所以我们通过wx.stopPullDownRefresh()方法来结束刷新动画。
    官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/ui/pull-down-refresh/wx.startPullDownRefresh.html

    代码示例如下

    九,列表的分页加载

    9-1,小程序数据库每次最多20条

    小程序数据库api和云函数调用数据的限制
    小程序端直接调用云数据库时,每次最多可以获取20条,云函数里调用云数据库时每次最多获取100条。所以我们数据多的时候要做分页加载。

    9-2,分页加载的核心方法

    我们做分页加载时,主要用到了skip和limit方法,对应的官方文档如下

    • skip:每页加载多少条
      https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/collection/Collection.skip.html
    • limit: 加载第几页的数据https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/collection/Collection.limit.html

    其实这个skip和limit我在数据库的那一节有做初步讲解,这一节我们就借助具体分页加载的案例来做综合讲解

    9-3,导入108条数据

    9-3-1,下载数据源

    这108条数据是石头哥提前为付费用户/年卡用户准备好的,如果你没有付费,可以自己去数据库里创建108条数据即可。

    9-3-2,导入到数据表

    我这里导入到num数据表,导入成功如下:

    9-3-3,别忘记修改表权限

    把数据表(集合)的权限改为所有用户可读,仅创建者可读写。

    9-4,上拉加载更多监听

    我们的列表滑动到最后一个数据时,会执行下面的方法

    所以我们的分页加载要在onReachBottom里做。

    9-5,数据库分页加载代码实现

    直接调用数据库每次最多只能加载20条数据

    wxml里只做简单的列表数据显示就行了

    wxss做个简单的样式

    对应的效果如下

    9-5-1,没有更多数据时的友好提示

    9-5-2,加载中和加载完成的友好提示

    • 加载中
       wx.showLoading({
          title: '加载中...',
        })
    
    • 隐藏加载中
    wx.hideLoading()
    

    9-6,通过云函数实现分页加载

    通过云函数调用数据库,每次最多可以加载100条数据.

    • 如果每页20条以内,不建议用云函数
    • 如果分页的时候,每页大于20条,就用云函数。

    十,搜索功能

    今天来给大家讲讲小程序的搜索功能。我这里后台数据库用的是小程序云开发的云数据库。所以我们搜索的时候就要借助云开发来实现。

    10-1,需求

    比如我这里有如下的一些数据

    我们想实现如下搜索需求

    • 1,搜索标题(title)包含‘小石头’的数据
    • 2,搜索标题(title)或者描述(desc)包含‘小石头’的数据
    • 3,搜索标题(title)描述(desc)都包含‘小石头’的数据

    我们知道数据库查询的时候有个where语句,但是where语句是查询某个字段全部包含你输入的内容时才可以,所以单纯用where语句来做搜索的话,结果太单一。所以我们今天就来学习下模糊搜索功能的实现。我们以上面三个需求为例,来一个个讲解。

    10-2,实现原理

    我们做模糊搜索的时候,其实就是查询某个字段里是否包含我们的搜索词。而模糊搜索需要借助RegExp,来看看RegExp是什么。

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/Database.RegExp.html

    • 再来看看官方示例

      可能看官方示例会有点糊涂,那么我们接下来就结合具体代码来给大家做下讲解。

    10-3,模糊搜索的代码实现

    10-3-1,模糊搜索单个字段

    • 需求:搜索标题(title)包含‘小石头’的数据

    代码如下

    查询结果如下:

    可以看到我们成功的查询到了标题里包含‘小石头的数据’

    10-3-2,模糊搜索多个字段(满足一个即可)

    • 需求:搜索标题(title)或者描述(desc)包含‘小石头’的数据

    由于我们要查询多个字段,所以我们这里用到了command高级操作符里的or

    代码如下:

    查询结果:

    我们来分析下这两条数据

    • 1,标题和描述都包含‘小石头’,符合
    • 2,虽然标题里没有‘小石头’,但是描述里有,所以也符合。
    • 3,title和desc里都没有‘小石头’,所以不符合。

    10-3-3,模糊搜索多个字段(要同时满足)

    • 需求:搜索标题(title)描述(desc)都包含‘小石头’的数据

    由于我们要查询多个字段,所以我们这里用到了command高级操作符里的and

    代码如下:

    查询结果:

    我们来分析下这两条数据

    • 1,标题和描述都包含‘小石头’,符合
    • 2,虽然desc里没有‘小石头’,但是title里没有,所以也不符合。
    • 3,title和desc里都没有‘小石头’,所以也不符合。

    10-4,源码

    为例方便大家使用,我把完整的代码贴到这里,后面大家使用时,直接复制这里的代码,略微改造下就可以了。

        //我这里简单起见就把搜索词写死,正常应该用户输入的
        let searchKey = '小石头'
        let db = wx.cloud.database()
        let _ = db.command
    
        db.collection('news')
          .where(_.or([
            {//标题
              title: db.RegExp({ //使用正则查询,实现对搜索的模糊查询
                regexp: searchKey,
                options: 'i', //大小写不区分
              }),
            },
            {//描述
              desc: db.RegExp({
                regexp: searchKey,
                options: 'i',
              }),
            }
          ])).get()
          .then(res => {
            console.log('查询成功', res)
          })
          .catch(res => {
            console.log('查询失败', res)
          })
    

    10-5,获取用户输入的搜索词进行搜索

    十一,登录注册

    十二,点赞与收藏

    十三,CMS网页版管理后台

    13-1,开通cms的准备工作

    开通cms需要你云开发里使用按量付费,如果你是第一次开通云开发,记得做如下选择。
    在这里插入图片描述
    如果你已经开通过云开发,记得把付费模式改为按量付费。

    云开发实战案例···》

    实战一,云开发实现订阅消息推送

    之前的通过formid发送模板消息推送,将在2020年1月10日下线,所以我们不得不使用订阅消息了。

    我们先来看下订阅消息的官方简介。

    接下来我们就来借助云开发,来快速实现小程序消息推送的功能。

    1,获取模板 ID

    这一步和我们之前的模板消息推送是一样的,也是先添加模板,然后拿到模板id

    首先是开通订阅消息功能,很简单,如下图

    由于长期性订阅消息,目前仅向政务民生、医疗、交通、金融、教育等线下公共服务开放,后期将逐步支持到其他线下公共服务业务。仅就线下公共服务这一点,长期性订阅消息就和大部分开发者无缘了。
    所以我们这里只能以使用一次性订阅消息为例。

    如上图,我们从公共模板库里选择一个一次性订阅的模板。然后编辑模板如下图

    下图就是我们添加好的模板,下图的模板id就是我们需要的。

    2,请求用户授权

    我们做订阅消息授权时,只能是用户点击或者支付完成后才可以调起来授权弹窗,官方是这么要求的:

    我们这里用到了wx.requestSubscribeMessage这个方法,来获取用户的授权。

    • 1,编写index.wxml代码
    • 2,编写index.js代码,实现点击获取授权

      这一步tmplIds里的一串字符,就是我们自己添加的模板id
    • 3,点击按钮运行效果如下
      开发者工具模拟器上点击授权弹窗是这样的:

      手机上的授权弹窗是这样的:

      可以看到,这里显示的就是我们添加的 ‘上课提醒’的模板。
      细心的同学可以看到, 真机上多了一个 ‘总是保持以上选择,不再询问’
      其实,你自己仔细多品一些。也能明天,我们正常订阅消息授权时,用户允许的话,你只能推送一次消息。也就是用户允许一次,我们就可以推送一条消息给用户,并且这个允许不存在过期。所以我们可以让用户尽量多的点击允许,这样我们就可以尽量多的给用户发送消息了。

    这里用户允许后,我们就可以给用户推送消息了,接下来我们来借助云开发的云函数来实现消息推送功能。

    3,获取用户的opneid

    先来看官方爸爸是怎么说的。

    可以看出官方提供了两种方式,我们这里使用云调用。说白了就是在云函数里调用推送功能。

    • 推送所需参数

      可以看到我这里用来openapi功能,并且需要用到用户的opneid,关于openid的获取,我之前有写过文章,也录过视频的。文章的话,大家去翻下我历史的文章,视频的话,点击这个即可:《借助云函数获取用户openid》
      这里的openid的获取我就不再详细讲解了,把对应云函数的代码给大家贴出来。

      在使用云开发时,有几点需要注意的
    • 1,需要在project.config.json里创建云函数目录如下图
    • 2,需要在app.js里初始化云开发环境

      至于云开发的环境id从哪里拿,我视频里也讲过很多遍了,直接去看我视频或者翻看我历史文章即可。
      《零基础入门云开发视频》

    4,用云函数实现消息推送

    我们只需要创建一个云函数如下,然后填入用户的openid,要跳转的小程序页面链接,模板内容,模板id即可。通常这些数据都应该传进来,简单起见,我就把这里的模板内容写成固定的。

    注意:我在编写上面的代码时,推送内容的key必须和小程序模板里的key保持一致,否则就会报如下错误。

    • 然后看下调用这个云函数的地方

      如果用户没有授权,我们推送会报如下错误

      如果用户授权过,我们就可以成功推送了,推送后的打印日志如下

      还记得我们真机上的授权吗,如果用户只是点击了允许,没有选择一直允许,那我我们在推送成功一次后,如果再次推送,就需要用户重新授权。否则,还是会报这个错误的

      所以我们用户点击一次允许,我们就可以推送一次消息,比如,我点击了4次允许那么我就可以成功的推送4次

    效果图


    可以看到,我们成功的收到 上课提醒的模板消息,点击进去,就是我们具体的推送内容

    其实我这是连续收到了4条消息,因为我点击了4次允许推送,所以就可以成功的推送4次。

    到这里我们就完整的实现模板消息推送功能了,下面我把主要代码贴给大家,大家也可以私信我获取完整源码。

    • index.wxml
    <button bindtap="shouquan" type='primary'>获取订阅消息授权</button>
    <button bindtap="getOpenid">获取用户的openid并推送消息</button>
    
    • index.js
    //编程小石头wechat:2501902696
    Page({
      //获取授权的点击事件
      shouquan() {
        wx.requestSubscribeMessage({
          tmplIds: ['CFeSWarQLMPyPjwmiy6AV4eB-IZcipu48V8bFLkBzTU'], //这里填入我们生成的模板id
          success(res) {
            console.log('授权成功', res)
          },
          fail(res) {
            console.log('授权失败', res)
          }
        })
      },
      //获取用户的openid
      getOpenid() {
        wx.cloud.callFunction({
          name: "getopenid"
        }).then(res => {
          let openid = res.result.openid
          console.log("获取openid成功", openid)
          this.send(openid)
        }).catch(res => {
          console.log("获取openid失败", res)
        })
      },
      //发送模板消息到指定用户,推送之前要先获取用户的openid
      send(openid) {
        wx.cloud.callFunction({
          name: "sendMsg",
          data: {
            openid: openid
          }
        }).then(res => {
          console.log("推送消息成功", res)
        }).catch(res => {
          console.log("推送消息失败", res)
        })
      }
    })
    
    • 推送对应的云函数
    //编程小石头wechat:2501902696
    const cloud = require('wx-server-sdk')
    cloud.init()
    exports.main = async(event, context) => {
      try {
        const result = await cloud.openapi.subscribeMessage.send({
          touser: event.openid, //要推送给那个用户
          page: 'pages/index/index', //要跳转到那个小程序页面
          data: {//推送的内容
            thing1: {
              value: '小程序入门课程'
            },
            thing6: {
              value: '杭州浙江大学'
            },
            thing7: {
              value: '第一章第一节'
            }
          },
          templateId: 'CFeSWarQLMPyPjwmiy6AV4eB-IZcipu48V8bFLkBzTU' //模板id
        })
        console.log(result)
        return result
      } catch (err) {
        console.log(err)
        return err
      }
    }
    

    后面我会分享更多小程序相关的知识出来,请持续关注。

    注意:授权一次,只能发送一条消息。

    5,发送订阅消息给多个用户

    //发送订阅消息给多个用户
      sendAll() {
        if (name == null || name == '') {
          wx.showToast({
            icon: "none",
            title: '请输入课程名',
          })
          return
        }
        let users = [
          "oc4sa0Vp_s65LEItm4JSWT5WFQds",
          "oc4sa0dZ-pSCu95djiLCt7jo97bY"
        ]
    
        users.forEach(item => {
          console.log("for循环", item)
          this.sendFun(item, name)
        })
      },
      //封装的方式方法
      sendFun(openid, name) {
        wx.cloud.callFunction({
          name: "fasong",
          data: {
            openid: openid,
            name: name
          }
        }).then(res => {
          console.log("发送单条成功", res)
        }).catch(res => {
          console.log("发送单条失败", res)
        })
      }
    

    实战二,短信验证码

    老规矩先看效果图

    普通短信

    验证码短信

    今天被云开发官方告知,云开发支持发短信功能了,然后就迫不及待的来尝下鲜。

    官方文档:
    https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/cloudbase/cloudbase.sendSms.html

    进入官方文档一看,云开发给咱们开发者的福利还真不小。
    不仅仅可以很方便的使用短信功能,还送了咱们1000条免费短信。不用白不用嘛。这1000条短信足够咱们把小程序短信功能,和小程序短信验证码功能都学会了。
    废话不多说了,咱们直接来撸代码

    1,使用云开发短信的条件

    这个前置条件很重要,条件不满足,你就没法使用云开发短信功能。

    使用条件

    • 1,必须是企业小程序,目前个人小程序无法使用短信发送
    • 2,必须开通静态网站功能(后面应该会逐步放开)
    • 3,必须开通云开发(这个没得说,不开通云开发你还用啥云开发功能啊)

    上面条件都满足以后,我们就可以来愉快的撸代码了。

    年卡福利

    • 1,可以获取石头哥目前所有视频课
    • 2,未来一年内出的新课也可以获取
    • 3,一对一问题解答,远程协助
    • 4,可以借用石头哥的企业小程序

    感兴趣可以加石头哥微♥ 2501902696 备注年卡

    2,开通静态网站功能

    如果你不开通静态网站,直接调用短信发送,会报如下错误。

    其实官方文档里也有给出这个错误。

    那么我们就来开通静态网站功能。开通静态网站功能之前,必须开通云开发,配置好云开发的环境。这些我在云开发入门里讲过很多遍。还不知道的同学可以翻看下我前面的文章或者视频:https://edu.csdn.net/course/detail/26572

    这里开通云开发我们借助小程序开发者工具来实现快速开通。

    2-1,注册小程序

    这里我就不再多说了,只有注册过小程序的appid才可以开通云开发

    我们注册好小程序后,就可以拿到appid了,如上图

    2-2,创建一个小程序项目

    小程序项目的创建,我这里不再多说,我前面小程序基础课里有讲过很多遍。《小程序基础学习》

    这里强调一点,就是创建小程序项目时一定要用我们自己的appid不要用测试号。
    在这里插入图片描述
    如果你一开始是用测试appid创建的,也可以通过上图的方式更换成自己的小程序的appid。

    2-3,开通云开发

    这里云开发的开通,我就不做过多讲解了,我云开发课程里也讲过很多遍。大家可以去翻看下

    只需要点击开发者工具里的云开发按钮,跟着提示一步步操作就可以快速开通云开发。

    2-4,开通静态网站功能


    我们上面云开发开通好以后,就可以在这里快速开通静态网站了。

    点击以后,直接点击开通即可

    这时候开通有个条件

    我们必须按照要求改变自己小程序的付费方式,把我们的付费方式改成按量付费即可。

    这里不用担心,这里的按量付费,每月都有免费额度。这些额度我们开发学习基本上够用了


    这个时候我们的静态网站功能就开通成功了。

    开通成功以后如下图。

    3,编写发送短信的云函数

    其实上面静态网站功能开通以后,我们不用上传网站资源,就可以直接来使用短信功能了。
    下面我们就来使用云开发的云函数功能来做短信发送功能。
    老规矩先看效果图

    代码编写也很简单

    其实发送短信的代码很简单,就上面这几行。下面就来教大家如何编写这个云函数。

    3-1,初始化云开发环境id

    新建一个和pages平级的目录cloud,用于存放云函数

    然后在project.config.json里添加cloudfunctionRoot选项。

    然后对cloud选择当前环境

    在app.js里配置环境变量

    这个env环境id需要你去云开发控制台获取

    3-2,创建云函数

    右键cloud目录,新建Node.js云函数

    然后新建一个云函数,名字你可以自定随便定。我这里用sendSms

    3-3,编写云函数


    我这里把代码贴给大家,记得把env和接收短信的手机号换成你自己的。

    const cloud = require('wx-server-sdk')
    cloud.init({
      env: cloud.DYNAMIC_CURRENT_ENV
    })
    exports.main = async (event, context) => {
      try {
        const result = await cloud.openapi.cloudbase.sendSms({
          env: 'xiaoshitou-zfl2q',
          content: '编程小石头发布了新的能力',
          phoneNumberList: [
            "+8615611823564"
          ]
        })
        return result
      } catch (err) {
        return err
      }
    }
    

    3-4,部署云函数

    上面云函数编写好了,一定要记得部署下云函数。右键sendSms然后点击下面箭头所示的即可。

    上传部署成功后,会有下面这样的提示

    4,调用云函数发送短信

    我们上面云函数编写并部署成功以后,就可以来调用这个云函数,发送短信了。

    4-1,编写wxml文件

    在wxml文件里写一个button按钮,编写一个bindtap点击事件

    4-2,编写js文件

    在js文件里实现上面button的点击事件,然后调用云函数

    调用云函数时,一定要记得这里的name必须和你的云函数名一模一样。

    4-3,点击发送短信

    点击发送短信

    点击发送 短信以后,可以看到日志里打印openapi.cloudbase.sendSms:ok
    这就代表发送成功了。
    然后再看下手机,收到下面的短信。

    到这里我们的短信发送功能就完整的实现了。
    其实到这里该实现的功能,就已经实现了。但是我们使用短信场景更多的是用短信发送验证码。所以接下来给大家做一个发送短信验证码的例子出来

    5,发送验证码短信

    老规矩,先看效果图

    我们只需要获取用户输入的手机号,然后点击获取验证码,最后输入短信里接收到的验证码,进行验证即可。

    5-1,编写wxml

    页面比较简单,就两个输入框和两个按钮

    5-2,编写js

    js里主要是获取用户输入的手机号,然后发送验证码,发送验证码调用云函数实现短信验证码发送功能。用户输入验证码以后进行校验即可。

    5-3,发送短信验证码

    用户输入手机号以后,点击发送,可以看到我们手机上收到了如下短信。


    然后用户输入获取到的验证码,点击验证。

    可以看到验证成功,验证成功以后后面的操作就可以自己定了,比如验证成功以后跳转到登录成功页。

    到这里我们就实现了验证码发送功能了。

    5-4,生成随机验证码的方法

    我这里把生成随机验证码的方法贴给大家。

    字母和数字混合

      //获取随机验证码,n代表几位
      generateMixed(n) {
        let chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
        let res = "";
        for (var i = 0; i < n; i++) {
          var id = Math.ceil(Math.random() * 35);
          res += chars[id];
        }
        return res;
      }
    

    数字混合

      //获取随机验证码,n代表几位
      generateMixed(n) {
        let chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
        let res = "";
        for (var i = 0; i < n; i++) {
          var id = Math.ceil(Math.random() * 9);
          res += chars[id];
        }
        return res;
      }
    

    实战三,群发短信

    我们上面给单个手机发送验证码的功能实现了,接下来就教大家如何群发短信。

    老规矩,先看效果图

    官方文档:
    https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/cloudbase/cloudbase.sendSms.html

    使用云开发短信的条件

    这个前置条件很重要,条件不满足,你就没法使用云开发短信功能。

    • 1,必须是企业小程序,目前个人小程序无法使用短信发送
    • 2,必须开通静态网站功能(后面应该会逐步放开)
    • 3,必须开通云开发(这个没得说,不开通云开发你还用啥云开发功能啊)

    上面条件都满足以后,我们就可以来愉快的撸代码了。

    年卡福利

    • 1,可以获取石头哥目前所有视频课
    • 2,未来一年内出的新课也可以获取
    • 3,一对一问题解答,远程协助
    • 4,可以借用石头哥的企业小程序

    感兴趣可以加石头哥微♥ 2501902696 备注年卡

    1,编写wxml页面

    简单起见,我这里只定义一个输入手机号的输入框和一个button按钮

    对应的代码如下
    在这里插入图片描述

    2,获取用户输入的手机号

    我这里以*来分割手机号,如下图所示。

    然后我们定义一个bindinput事件来获取用户输入的内容。

    可以看到,我们成功的获取到了用户输入的手机号了。

    但是官方文档里已经说明,我们群发短信的时候需要用到的是一组手机号,也就是说需要用数组来存放数据。但是我们这里是一个字符串。那么我们就要分割字符串成数组了。

    3,分割字符串成数组

    我们分割字符串用到的是字符串的split()方法

    当然触发的时机,应该是在用户点击群发按钮的时候。那么我们就为群发按钮定义bindtap点击事件send

    可以看到我们成功的把字符串分割成了数组。

    但是我们数组里的手机号前面有个回车键,所以安全起见,我们在分割字符串之前,需要先把这回车键给剔除掉。

    4,去除字符串里的回车键

    去除字符串里的回车键语法如下

    字符串.replace(/[\r\n]/g, "")
    

    可以看到我们只需要调用字符串.replace方法即可,后面括号里跟的是回车键对应的正则表达式。这里不需要记住,后面用的时候来我笔记这里复制就行了。

    可以看到我们剔除回车键以后,再分割的字符串里就没有回车键了。

    5,遍历数组给手机号前面+86

    如果你有仔细阅读官方文档,可以看到我们群发的手机号前面必须以+86开头。并且每次群发的手机号不能超过1000条。

    那么我们接下来就要遍历数组,给每个手机号前面都添加‘+86’了。
    当然了这里有很多种方法来实现这一目的,我这里用一个for循环和一个map方法来分别实现下。

    可以看出用map方法更简介一点。但是对于新手来说第二种方法可能不是很好理解。所以这里你用那种方法都可以,不做强制要求。

    5-1,通过for循环来实现

    5-2,通过map方法来实现

    6,编写群发短信的内容

    那么我们接下来要做的就是实现群发功能了。我们这里要想成功的实现群发,需要两个元素

    • 要群发的短信内容
    • 要群发的手机号

    关于手机号和群发内容都有要求

    我们群发手机号这里已经符合要求了,接下来就是群发的内容了。群发内容最长不能超过60个字节,一个汉字通常2~3个字节。也就是说我们短信内容不能超过20个字,所以群发的短信一定要精细。用最少的字来吸引用户。

    这里其实就是一个input来获取用户输入的内容就行了。我不再多讲,直接把代码贴出来。

    在js里获取用户输入的短信内容

    现在完事具备,只欠一个云函数了

    7,编写群发短信的云函数

    短信内容和群发的手机号都已经成功拿到了,我们接下来就要来编写群发的云函数了。

    云函数其实我们短信验证码那一节基本上一样,区别就是

    • 短信验证传入的是:验证码+单个手机号
    • 群发传入的是:短信内容+多个手机号

    云函数编辑好,记得重新部署下。

    8,调用云函数实现群发

    上面云函数编辑好了,也部署好了,接下来就是要调用云函数实现短信群发了。

    调用其实很简单。

    9,群发演示失败

    接下来我们就要验证自己的劳动成果了。如下,我发这样的内容给两个手机号。为什么是两个呢,我这里是学习,要节省短信条数。官方只送我们1000条。所以要省着点用。

    其实群发两个手机号,和群发1000个没区别,只要群发两个成果,那么群发1000个也一样的。

    辛辛苦苦编写好了,测试了下,居然报错

    什么鬼,代码明明没有错误啊,程序员有时候就是莫名的自信。
    官方给的发送成果返回字段如下

    石头哥发送返回结果如下

    百思不得其解啊。不会真是代码写错了吧。。。。
    还好石头哥比较聪明,翻译了一下报错信息。

    发送时间限制,也没看到官方文档有说时间限制啊。后来又去官方文档翻来覆去,终于在一个角落里看到了这句话。

    原来是石头哥写文章太晚了。。。。

    本来想写完文章,直接录讲解视频给大家的,,,,看来只能等第二天8-22:00来续写这篇文章了。。。。

    10,群发演示成功

    终于等到了第二天8点47,下面我们把昨天的群发短信再演示一遍,看这次能不能成功。
    先来看我们的日志

    可以看出日志上显示成功的发送两个。那么收到的短信长什么样子,也给大家截个图。
    第一个手机号是安卓手机

    第二个手机号是苹果手机

    到这里我们的群发短信功能就完整的实现了。

    展开全文
  • 云开发---uniapp云开发(二)---云存储基础

    千次阅读 多人点赞 2021-02-14 15:52:25
    云开发—uniapp云开发(一)—服务空间创建以及部署一个云函数 云开发—uniapp云开发云函数练习—整合百度ai图像识别SDK 这次我们来一起学习 云存储的使用 文档地址 https://uniapp.dcloud.io/uniCloud/storage 云...
  • 微信云开发

    千次阅读 2020-09-04 15:37:50
    文章目录什么是云开发建立云开发项目开通云服务体验小程序查看控制台云开发能力云调用云存储数据库资源环境配额 什么是云开发 云开发就是在开发微信小程序、小游戏,无需搭建服务器,使用微信云平台的API 进行核心...
  • 5小时零基础入门小程序云开发

    千人学习 2019-10-31 10:07:11
    本套课程带领大家零基础入门小程序云开发。 通过10小时的学习,你可以获得下面收获 1,学会小程序云开发 2,摆脱后台自己实现小程序后台 3,学会音视频小程序的开发 4,学会小程序图片的上传与管理 5,学习云开发...
  • 微信小程序开发实战入门,学习小程序云开发,摆脱后台,自己实现后台数据,从此就可以愉快的写小程序,自己实现小程序后台了。
  • 第一步,开通云开发: 点击开发者工具左上角的云开发按钮,就可以开通,个人认证的小程序也可以开通。 开通之后会有一个控制台,可以直接在控制台进行数据库的操作 注:AppID 首次开通云环境后,需等待大约 ...
  • 【小程序-云开发】手把手教你使用云开发(云储存开发) 话说上次程序员哥哥,教会美工妹妹创建小程序云开发的环境后;发现在云开发环境中竟然送了一个5G的储存空间。于是琢磨来琢磨去反正白用白不用,这5G储存空间...
  • 云开发---uniapp云开发(三)---云数据库基础(超详细)

    千次阅读 多人点赞 2021-02-18 23:51:11
    云开发基础 https://blog.csdn.net/qq_42027681/category_10802794.html 文档地址 https://uniapp.dcloud.io/uniCloud/hellodb 云数据库基础云函数操作数据库(腾讯云服务空间)创建数据表手动创建 可以看到官方给出...
  • 此篇文章适合学习过小程序原生开发,又不了解云开发的小白。(我就是^ - ^) 云开发为开发者提供完整的原生云端支持和微信服务支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,...
  • 今天这篇文章主要为大家详细介绍微信小程序云开发之新手环境配置,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 一.云开发配置环境 我们知道创建完项目会出现如下界面 (1)首次进入控制台会报cloud init ...
  • 第 3-2 课:云开发开篇 1 初识云开发 云开发是微信团队和腾讯云团队共同研发的一套小程序基础能力,简言之就是:云能力将会成为小程序的基础能力。 小程序云开发目前提供三大基础能力支持: 云函数:在云端运行的...
  • 微信小程序云开发文档 新建云开发模板 新建项目选择一个空目录,填入 AppID,勾选创建 “云开发 QuickStart 项目”,点击创建即可得到一个展示云开发基础能力的示例小程序。 开通云开发、创建环境 在使用云开发...
  • 文章目录云开发创建云开发项目打开云开发控制台 官方文档 云开发 能力 作用 说明 云函数 无需自建服务器 在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码 ...
  • 微信小程序云开发更换云开发环境

    千次阅读 2019-06-06 11:44:59
    小程序云开发环境初始化默认是第一个环境,但是我们可以指定环境id(如果环境名称起重名了,就可以指定环境ID,并非环境名称)。 方法 //app.js App({ onLaunch: function () { if (!wx.cloud) { console....
  • 小程序云开发·数据库

    万次阅读 多人点赞 2018-09-16 17:09:02
    云开发数据库提供的数据类型:string、number、object、array、bool、GeoPoint(地理位置点)、Date(时间)、Null 其中的Date表示时间,精确到毫秒。小程序端用Javascript内置Date对象创建的时间是客户端时间,在...
  • 微信小程序云开发之云数据库入门

    万次阅读 2020-07-20 12:28:34
    微信小程序云开发之云数据库入门 介绍 开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。 其基础能力数据库,是一个JSON数据库,作用是无需自建数据库,就可以在微信小程序前端操作...
  • 小程序云开发

    千次阅读 2019-07-05 15:37:20
    云开发的认识 什么是云开发 云开发和传统模式的区别 三大基本功能的支持认识 开通云开发二.云数据库 云数据库认识 类型支持 控制云数据库权限 控制云数据库的方式 云数据库管理管理 ...
  • 一、小程序传统开发模式: 传统开发中, 开发者不仅需要关注前端的页面展示, 还...云开发中,开发者只需要关注前端的页面展示, 后端的服务器、维护、安全处理等工作全部由腾讯云代替我们完成,方便了很多! ...
  • 阿里云云开发平台的创建与部署

    千次阅读 多人点赞 2021-03-15 07:56:19
    阿里云云开发平台的创建与部署 阿里云云开发平台的创建与部署 首先我们要登录阿里云 然后创建 云开发平台应用 接下来我们选择开发语言和创建方式 接下来开通依赖的服务 之后我们部署日常环境的应用配置 接下来...
  • 云开发系列 使用腾讯云服务空间 开发工具 Hbuilder X 服务空间创建以及部署一个云函数服务空间创建新建uniapp项目新建一个云函数配置请求url测试获取请求参数测试 服务空间创建 由此网站进入 服务空间管理 ...
  • 什么是微信小程序云开发: 个人理解是一套后端服务能力(数据库、文件空间、云函数),相比购买一套服务器空间、数据库、写后端代码,云开发会更方便。(但只限于部分小项目推荐) 创建一个带云开发能力的微信小...
  • 你我皆凡人,没多少人能直接会云开发的,都是在小程序地基打好之后才想云开发这神奇华丽又超级好用的空中楼阁。问题来了,小程序工程做了大半,如何把小程序工程变成云开发工程呢? 问题解决: 1.工程创建事项 图...
  • 微信小程序云开发入门实践

    千次阅读 多人点赞 2020-02-20 19:37:57
    云开发介绍 什么是云开发 2017年微信小程序发布后,一度的开发模式是前端页面使用微信小程序的相关组件,在涉及到后台登录及业务交互的时候,需要使用自建的服务器,后台不管是PHP还是JAVA架构,都需要暴露相应的...
  • 相信大家有时候在使用云开发的时候也有这样的想法,云开发可不可以开发网页端,接下来我就以java搭建一个简单的案例,实现云开发与网页端的管理 在小程序文档中的HTTP API对应接口,使用java时,我们需要采用...
  • 【系】微信小程序云开发实战坚果商城-目录

    万次阅读 多人点赞 2019-11-19 11:25:54
    【系】微信小程序云开发实战坚果商城 目录 开篇 【系】微信小程序云开发实战坚果商城-开篇 基础篇 【系】微信小程序云开发实战坚果商城-弹性盒子 【系】微信小程序云开发实战坚果商城-ES6 简单入门 【系】...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 63,739
精华内容 25,495
关键字:

云开发