小程序+云开发---基础篇

淩亂°似流年 2022-01-27 15:05 323阅读 0赞

# 1.小程序的基础练习 #

<text>{
       {msg}}</text>
    <image class='banner' src="{
       {img}}"></image>
    <view wx:for="{
       {arr}}" wx:key="{
       {index}}">
      {
       {index}} {
       {item}}
    </view>
    
    <view wx:for="{
       {list}}" wx:key="{
       {index}}">
      {
       {item.name}} {
       {item.age}}
    </view>
    
    <view wx:if="{
       {isLogin}}">wang</view>
    <view wx:else>请您先登录</view>
    
    <view hidden='{
       {isLogin}}'>hidden</view>
    
    
     <view class='boss' bindtap='onclickHander' data-id="1234">
      <view class='child' catchtap='onchildHander'></view>
     </view>
    
     <button size='mini' bindtap='onTapHandler'>点击+1</button>
     <view>{
       {count}}</view>

// pages/base/base.js
    Page({
      /**
       * 页面的初始数据
       */
      data: {
        msg: "hello world",
        img:"/images/film.png",
        arr:[10,20,30,40],
        list:[
          {
            name:"wang",
            age:19
          },
          {
            name:"Daniel",
            age:20
          }
        ],
        isLogin:true,
        count: 0,
      },
    
      //点击+1
      onTapHandler(){
        // this.data.count++;
        this.setData({
          count:this.data.count+1
        })
      },
    
      onclickHander(e){
        console.log("11");
        console.log(e.target.dataset)
      },
      onchildHander(){
        console.log("22child")
      },
      
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function(options) {},
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function() {},
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function() {},
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function() {},
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function() {},
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function() {},
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function() {},
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function() {}
    });

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70][]

## 注意： ##

###      如果需要频繁切换的情况下，用hidden更好        如果在运行是条件不大可能改变则wx:if较好 ###

###      设计师最好用iphone6设计标准来做UI图 ###

###      第三方样式库：WeUI、iView Weapp、Vant Weapp ###

###      catch 和 bind的区别：        bind是可以事件冒泡的，catch在事件中会阻止事件冒泡 ###

###      数据类型：          String:字符串                 Number：数字          Object:对象          Array:数组          Bool:布尔值          GeoPoint：地理位置点          Date：时间（客户端时间）          Null     ###

# 2.云开发 #

<view>云数据库的代码</view>
    <button bindtap='insert'>插入数据</button>
    
    <button bindtap="update">更新数据</button>
    
    <button bindtap="search">查找数据</button>
    
    <button bindtap='delete'>删除数据</button>
    
    <view>云函数</view>
    <button bindtap='sum'>调用云函数</button>
    <button bindtap='getOpenId'>获取用户当前用户openid</button>
    <button bindtap='getDelete'>批量删除</button>

// pages/cloud/cloud.js
    const db = wx.cloud.database();//初始化数据库
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
    
      },
    
    //插入数据
      insert(){
        console.log("插入数据");
        /*db.collection('user').add({
          data:{
            name:'wang',
            age:20
          },
          success:res=>{
            console.log(res);
          },
          fail:err=>{
            console.log(err);
          }
        })*/
    
        //使用promise的写法
        db.collection('user').add({
          data:{
            name:'wangcoder',
            age:23
          }
        }).then(res => { 
          console.log(res);
        }).catch(err=>{
          console.log(err);
        })
      },
    
    //更新数据
      update(){
        db.collection('user').doc('f4b905395ceaa61e062a8acd12369409').update({
          data:{
            age:21
          }
        }).then(res=>{
          console.log(res);
        }).catch(err=>{
          console.log(err);
        })
      },
    
      // 查找数据
      search(){
        console.log('aaa');
        db.collection('user').where({
          name:'wangyang'
        }).get().then(res=>{
          console.log(res);
        }).catch(err=>{
          console.log(err);
        });
      },
    
      //删除数据
      delete(){
        db.collection('user')
        .doc('57896b495ceaa8e10627bde54a1b3345')
        .remove()
        .then(res=>{
          console.log(res);
        }).catch(err=>{
          console.log(err);
        })
      },
    
      // 调用云函数文件
      sum(){
        wx.cloud.callFunction({
          name:'sum',//这里是当前云函数的名称
          data:{
            a:2,
            b:5
          }
        }).then(res=>{
          console.log(res);
        }).catch(err=>{
          console.log(err);
        });
      },
    
    
      // getOpenId
      getOpenId(){
        console.log("aaavvv");
        wx.cloud.callFunction({
          name:'login'
        }).then(res=>{
          console.log(res);
        }).catch(err=>{
          console.log(err);
        })
      },
    
      //getDelete
      getDelete(){
        wx.cloud.callFunction({
          name:'batchDelete',
        }).then(res=>{
          console.log(res);
        }).catch(err=>{
          console.error(err);
        })
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 1][]

sum里面的index.js

// 云函数入口文件
    // const cloud = require('wx-server-sdk')
    
    // cloud.init()
    
    // 云函数入口函数
    exports.main = async (event, context) => {
      return{
        sum: event.a + event.b
      }
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 3][]

每次写完云函数，要记得上传上去哦，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 4][]

获取用户当前用户openid

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 7][]

批量删除

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 8][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 9][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 10][]

### 云存储 ###

// pages/cloud/cloud.js
    const db = wx.cloud.database();//初始化数据库
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        images:[]
      },
    
      //upload
      upload(){
        //选择图片,chooseImage第一步
        wx.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success(res) {
            // tempFilePath可以作为img标签的src属性显示图片
            const tempFilePaths = res.tempFilePaths;
            console.log(tempFilePaths);
    
            //第二步uploadFile
            wx.cloud.uploadFile({
              cloudPath: new Date().getTime()+'.png', // 上传至云端的路径
              filePath: tempFilePaths[0], // 小程序临时文件路径
              success: res => {
                // 返回文件 ID
                console.log(res.fileID);
                db.collection('images').add({
                  data:{
                    fileID: res.fileID
                  }
                }).then(res=>{
                  console.log(res);
                }).catch(err=>{
                  console.log(res);
                })
              },
              fail: console.error
            })
          }
        })
      },
    
      //getFileShow
      getFileShow(){
        wx.cloud.callFunction({
          name:'login'
        }).then(res=>{
          db.collection('images').where({
            _openid: res.result.openid
          }).get().then(res2=>{
            console.log(res2);
            this.setData({
              images:res2.data
            })
          })
        })
      },
    
      //downloadFile
      downloadFile(event){
        wx.cloud.downloadFile({
          fileID: event.target.dataset.fileid, // 文件 ID
          success: res => {
            // 返回临时文件路径
            console.log(res.tempFilePath);
            //保存图片
            wx.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success(res) { 
                wx.showToast({
                  title: '保存成功',
                })
              }
            })
          },
          fail: console.error
        })
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 11][]

新建一个images的集合，来作为存储图片

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 12][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 13][]

源代码在我的github：[https://github.com/itWangCode/Wechat-Cloud-Development][https_github.com_itWangCode_Wechat-Cloud-Development]

云开发就是这样子的，其实也没有太多难度的东西

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20220127/c4e1eb3761364c98960b897dd78b41d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20220127/1ff2fe053e8b4eb9b693baf2aa0f5fee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20220127/96ad61a0bdd941a487e521f79789486a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20220127/55c94c1b43444b018554fa113aa4261d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 4]: /images/20220127/cf86c65b7b384ab2ba93cb4acea6c61e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 5]: /images/20220127/b1019e0ef77747a2b2dd343139819157.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 6]: /images/20220127/ef8794abd3ba4064917a82ef1b4f2cb0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 7]: /images/20220127/869ae31b36eb401c8a2962b36c88beed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 8]: /images/20220127/bacec10541244aaf9ceeeeaa53f7a03c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 9]: /images/20220127/881264fed93c4ad18f145a922fb1e3be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 10]: /images/20220127/64d6f009d65a45c5af1d9b9e2b7a2935.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 11]: /images/20220127/9c02e8eb1e0042669c275aa8f1aa5155.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 12]: /images/20220127/c3138ed1d0b14790a7713adbeb4b042b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 13]: /images/20220127/8d3e38ae9f0f40219e7eea269d812418.png
[https_github.com_itWangCode_Wechat-Cloud-Development]: https://github.com/itWangCode/Wechat-Cloud-Development