小程序的学习之路

在上传小程序的时候，本地设置都要勾选不校验合法域名、web-view（业务域名）、TLS版本已经HTTPS证书的选项

 

小程序的主体部分：

1、app.js（小程序的主要逻辑层，用来注册小程序，必要）

2、app.json（小程序公共配置，必要）

3、app.wxss（小程序公共样式，可省略）

 

app.json文件中，page注册页面，window配置界面窗口的信息

 

小程序当中没有view标签，用view来代替

 

小程序生命周期

onLauch 监听小程序初始化

onShow 监听小程序启动或切前台

onHide 监听小程序切后台

 

页面生命周期

onLoad 监听页面加载

onShow 监听页面启动或切前台

onReady 监听页面初次渲染完成

onHide 监听页面切后台

onUnload 监听页面卸载

 

flex弹性布局

在父容器上加上display:flex，将父容器编程弹性容器

.sort_box{
  display: flex;
  flex-direction: row;   //水平排列
  margin: 0 30rpx;
  justify-content: space-around;  //每个项目两端间隔相等
}

 

小程序中没有DOM，不能利用JS的document来获取元素

小程序的条件渲染

<view style="text-align:center">考试成绩{{score}}分</view>
<view wx:if="{{score<60}}">不及格</view>
<view wx:elif="{{score>=80}}">优秀</view>

小程序的循环渲染

wx:for绑定数组，wx:for-item值为当前项目的变量名，wx:for-index值为当前下标的变量名
<block wx:for="{{list}}" wx:for-item="item">
    <view class="item">
      <view class="item_img">
        <image src="{{item.img}}"></image>
      </view>
      <view class="item_name">{{item.name}}</view>
    </view> 
  </block> 

 

catch与bind的事件机制

bind会应用到冒泡机制，catch会阻止事件冒泡

捕获阶段的bind与catch用到的，绑定事件需要加上冒号

capture-bind:tap(绑定事件)
capyure-catch:tap(绑定事件)

 

常用路由的跳转方法

wx.navigateTo()--保留当前页面，跳转到应用内的某个页面，但是不能跳转到tabbar页面
wx.switchTap()--跳转到tabbar页面，并关闭其他所有非tabbar页面
wx.relaunch()--关闭所有页面，打开到应用内的某个页面
wx.redirectTo()--关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabbar页面
wx.navigateBack()--关闭当前页面，返回上一页面或多级页面

 

微信小程序进行云开发项目搭建

1、初始化小程序端以及云函数端

小程序端初始化，wx.cloud.init()方法，正常放在根目录的app.js文件中

云函数初始化，存放在cloudfunction文件夹，各云函数的index.js中

const cloud = require('wx-server-sdk')
cloud.init({
    env:cloud.DYNAMIC_CURRENT_ENV
})
exports.main = async(event, context) =>{
    return event
}

 

2、配置login云函数，若要调用云开发中的数据库操作，必须获取用户的openid才能调用，不然会显示错误

1)先安装好node与npm（自行查找安装方式，安装最新版本即可）

2)在cloutfunction/login中，通过命令行输入npm install --save wx-server-sdk@latest，安装wx-server-sdk

3)然后修改根目录中的app.js,env的参数，改成云开发环境的id

4)同步cloudfunction的云函数列表，上传并部署login文件夹

 

3、前端进行云开发数据库的增删改查

首先必须添加云数据库的集合

增：onAdd()函数

onAdd: function(){
    const db = wx.cloud.database()
    db.collection('集合名称').add({
        data:{
            上传的内容   
        },
        success: res=>{
            console.log("Upload success")
        },
        fail: res=>{
            console.log("Uplaod fail")
        }
    })    
}
//promise风格
onAdd2: function(){
    const db = wx.cloud.database()
    db.collection('集合名称').add({
        data:{
            上传的内容   
        },
        .then(res =>{
            console.log(res)
        })
        .catch(console.error)
    })    
}

删：onRemove()函数

onRemove: function() {
    if(this.data.counterId){//判断所要删除的数据存不存在
        const db = wx.cloud.database()
        db.collection('集合名称').doc('所要删除数据的索引')
        .remove({
            success: res =>{
                console.log('删除成功')    
            },
            fail: err =>{
                console.log('删除失败')
            }
        })
    }else{
        console.log('所删除的数据不存在')
    }
}

若是想要删除多条数据的话，则需要通过云函数来操作

const cloud = require('wx-server-sdk')
const db = cloud.database()
const _ = db.command

export.main = async (event, context) => {
    try{
        return await db.collection('集合名称').where({
            '定位需要删除的数据'
        }).remove()
    }catch(e){
        console.error(e)
    }
}

改：onUpdate()函数

onUpdate: function() {
    const db = wx.cloud.database();
    db.collection('集合名称').doc('需要修改数据索引').
    update({//局部更新，只更新指定字段
        data:{
            修改的数据
        },
        success: res=>{
            console.log('修改成功')
        },
        fail:err =>{
            console.log('修改失败')
        }
    })
}

onUpdate2: function() {
    const db = wx.cloud.database()
    db.collection('集合名称').doc('需要修改数据索引').
    set({//替换更新，把原有的整条记录覆盖掉
        修改的数据
    })
}

若是想要更新多条数据的话，则需要通过云函数来操作

const cloud = require('wx-server-sdk')
const db = cloud.database()
const _ = db.command

export.main = async (event, context) => {
    try{
        return await db.collection('集合名称').where({
            '定位需要修改的数据'
        }).update({
            date:{
                修改的内容
            }
        })
    }catch(e){
        console.erroe(e)
    }
}

查：onQuery()函数，只能查询有_openid的值

onQuery: function(){
    const db = wx.cloud.database()
    db.collection('集合名称').where({
        _openid:this.data.openid  //相当于唯一key值
    }).get({
        success: res=>{
            this.setData({
                queryResult:JSON,stringify(res.data, null, 2) //queryResult接受数据库传回数据
            })
            console.log('查询成功')
        },
        fail:err => {
            console.error('查询失败')
        }
    })    
}

//查询单条数据
onQuery2: function(){
    const db = wx.cloud.database()
    db.collection('集合名称').doc('查找的id').get().then({res=>{
        console.log(res.data)
    }})
}
//查询多条数据
onQuerys: function(){
    const db = wx.cloud.database()
    db.collection('集合名称').where({
        _openid:'user-open-id',
        查询的索引
    }).get()
}
//查询一个集合(默认传回20条数据)
onQueryList: function(){
    const db = wx.cloud.database();
    db.collection('集合名称').get().then(res=>{\
        console.log(res.date)
    })
}

//条件查询
onQuerywhere: function(){
    const db = wx.cloud.database()
    db.collection('集合名称').where({
        progress:db.command.'查询指令'
        //多条件查询
        progress:db.command.'查询指令'.and('查询指令')
    })
}

查询指令集合为

后台操作步骤如下，该操作多放在云函数文件夹中

const cloud = require(wx-serve-sdk)
cloud.init()
const db = cloud.database()
const MAX_LIMIT = 100 //一次最大传送数据条数
export.main = async (event, context)=>{
    //获取所有集合的总数
    const countResult = await db.collection('集合名称').count()
    const total = countResult.total
    //分批次读取数据
    const batchTimes = Math.cell(total/100)
    const tasks = []
    for(let i = 0; i< batchTimes; i++){
        const promise = db.collection('集合名称').skip(i*MAX_LIMIT).limit(MAX_LIMIT).get()
        tasks.push(promise)
    }
    return (await Promise.all(tasks)).reduce((acc, cur) => {
        return {
            data:acc.data.concat(cur.data),
            errMsg:acc.errMsg
        }
    })
}

匹配查询