小程序最基础篇

项目文件

文件类型：

.wxml 模板文件
.wxss 样式文件
.js 脚本文件
.json 配置文件
    project.config.json 项目配置
    app.json 全局配置
    page.json 页面配置

wxml

数据渲染

列表渲染
    wx:for='{{}}'  wx:key="{{index}}"
条件渲染
    wx:if='{{isLogin}}' wx:else
    wx:hidden='{{!isLogin}}'

if与hidden的区别：
    如果需要频繁切换的情况下，用hidden更好
    如果运行条件不大可能改变的则用if较好

wxss

1.尺寸单位：rpx,根据屏幕自适应，配置不同宽度的屏幕
2.引入外部wxss：@import './text.wxss',相对路径
3.第三方样式库：WeUI, iView Weapp, Vant Weapp

js

1. 改变数据：改变data里的数据必须通过setData({ cont:this.data.count++ })。
2. 点击事件：bindtap="handleClick", catchtab="handleClick"
   catchtab不允许事件冒泡 
3.自定义属性：data-属性名

小程序云开发

开发模式：

1. 云开发模式：
    客户端+云开发(云函数，云数据库，云存储)
    注意：使用云开发，题哦啊是基础库版本：2.2.3以上
2. 传统开发模式：
    客户端+服务端(后端服务，数据库)+运维(DB运维，内容加速，容器服务，安全加固，文件存储，网络服务，负载均衡。。。)

操作云数据库：

    小程序控制（读写数据库受权限控制限制）
    云函数控制（读写不受限制）
    控制台控制（读写不受限制）

1. 云数据库权限管理：(数据查找的时候，云后台手动添加的数据不能获取，此时需要修改权限)

    仅创建者可写，所有人可读
    仅创建者可读写
    仅管理端可写
    仅管理端可读

2. 数据库初始化：

    const db = wx.cloud.database()

切换数据库环境：

    const textDB = wx.cloud.database({
        ent: 'test'
    })

点击云开发 --> 数据库 --> 添加集合

添加数据：

    // 回调函数写法
    db.collection('user').add({
      data: {
        name: 'jerry',
        age: '22'
      }
    }),
    success: res => {
        console.log(res)
      },
    fail: err => {
        console.log(err)
      }
    })

    // Promise写法
    db.collection('user').add({
      data: {
        name: 'jack',
        age: '24'
      }
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })

更新数据：

    update: function() {
        db.collection('user').doc('id').update({
          data: {
            age: 33
          }
        }).then(res => {
          console.log(res)
        }).catch(err => {
          console.log(err)
        })
    }

查找数据：where查找，get获取

    search: function() {
        db.collection('user').where({
          name: 'jack'
        }).get().then(res => {
          console.log(res)
        }).catch(err => {
          console.log(err)
        })
    }

删除数据：

    delete: function() {
        db.collection('user').doc('e8f863ba5dfa0129048d45495ae2b622')
        .remove()
        .then(res => {
          console.log(res)
        }).catch(err => {
          console.log(err)
        })
    }

云函数

求和函数(cloudfunction文件下右键 --> 新建nodejs云函数)

   // sum()
   1. 云函数入口函数：(云函数定义)
    exports.main = async (event, context) => {
        return {
            sum: event.a + event.b
        }
    }
    每次修改云函数index.js文件，要将数据重新上传（右键-->上传并部署：云端安装依赖）
    2. 云函数调用：(可云端测试)
    sum: function() {
        wx.cloud.callFunction({
            name: 'sum',
            data: {
                a: 2,
                b: 4
            }
            }).then(res => {
              console.log(res);
            }).catch(err => {
              console.log(err);
        });
    }

获取当前用户的openid

1. 对比传统微信登录方式与云开发微信方式
2. 获取openid

传统微信登录方式：

云开发微信登录方式：

    getOpenId: function() {
        wx.cloud.callFunction({
            name: 'login'
        }).then(res => {
            console.log(res);
        }).catch(err => {
            console.log(err);
        });
    }

批量删除云数据库的数据

    1. 获取云数据
    const db = cloud.database();
    2. 云函数入口函数
    exports.main = async (event, context) => {
        try {
            return await db.collection('user').where({
                name: 'jerry'
            }).remove();
        } catch (e) {
            console.error(e);
        }
    }
    3. 云函数调用：
    // 批量删除数据
    batchDelete: function() {
        wx.cloud.callFunction({
            name: 'batchDelete'
        }).then(res => {
            console.log(res);
        }).catch(err => {
            console.log(err);
        });
    }

wx-server-sdk

    1）服务端SDK
    2）调用云函数的时候提示没有安装 wx-server-sdk包：
    安装：cloudfunction文件下右键打开命令,
    npm install --save wx-server-sdk@latest

云存储

图片上传

  upload: function() {
    wx.chooseImage({ // 官方文档
      count: 1, // 上传数量
      sizeType: ['original', 'compressed'], // 图拍大小（原文件/压缩文件）
      sourceType: ['album', 'camera'], // 图片类型（相册/拍照）
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths;
        console.log(tempFilePaths);

        // 上传文件api
        wx.cloud.uploadFile({
          cloudPath: 'example.png', // 上传至云端的路径
          filePath: tempFilePaths[0], // 小程序临时文件路径
          success: res => {
            // 返回文件 ID
            console.log(res.fileID);

            // 存储数据(云端 新建集合名称 image)
            db.collection('image').add({
              data: {
                fileID: res.fileID
              }
            }).then(res => {
              console.log(res);
            }).catch(err => {
              console.log(err);
            });
          },
          fail: console.error
        })
      }
    })
  }