微信小程序-基础

参加了微信小程序的比赛，记录下小程序开发的各种坑。

盒子模型

小程序的css语法和标准css没有区别，盒子模型如下图。

页面data

小程序采取的是数据绑定的形式来显示页面数据，先加载好数据，再渲染到页面上。
js文件里page的data属性提供页面基础数据，使用的时候按照如下形式使用。

<view class="area">{{step}}</view>

小程序的app.js也有全局变量域，提供全局调用，按照如下方式使用。

App({
  globalData:{
    openid:''
  },
})

页面page中的data可以包含各种的数据

Page({
  data: {
    searchmsg:app.msg,
    height: '540',
    startTime:0,
    point:[],
    }
)}

本页面的数据调用要用 this.data.变量 的形式，全局变量的调用要用app.变量的形式

//计算滑动窗口的相对位置
    var nx = this.data.nowx - (this.data.bx - a)
    var ny = this.data.nowy - (this.data.by - b)
    if(app.flag){//do something}

修改页面的数据要采用setData的方法

this.setData({
      bx: a,
      by: b,
 })

注意，在微信小程序中，需要获取页面初始化数据data的时候，如果使用this.data来获取，会出现获取不到的情况或者报undefiend的错误。原因是this代表当前对象，会随着程序的执行而发生改变，在各种请求方法的回调中，对象的上下文已经发生改变，所以已经不是原来的方法对象了，data也就不存在了。这个时候要采用var that = this的方法来获取到页面的值。

 	var that = this
	wx.showModal({
	    content: '是否确认',
	    success: function (sm) {
	    	if (sm.confirm) {
		    	var ind = that.data.path[0]
	            console.log("路径绘画：",that.data.path)
	            while(ind!=-1){
	                  //do something
	            }
	        }
    }

页面数据中的一维数组赋值非常奇怪。原理我也没太搞懂大致意思是提前把对象准备好？but还是照搬网上的大神的代码，能用就足够了。

let posx = "point[" + index + "].posx"
let posy = "point[" + index + "].posy"
that.setData({
        [posx]: ax,
        [posy]: ay,
})

然后是二维数组赋值，奇奇怪怪。

let m = "matrix[" + i + "][" + j + "]"
that.setData({
    [m]: w
})

滑动触发事件

用户手指滑动，分别用start，move和end可以捕获到用户所有动作。
用户单击按钮就正常绑定bindtap事件就可以了。

<!--index.wxml-->
<view class="container">
  <canvas style='height:{{height}}px;width:{{height}}px;margin-left:{{marginLeft}}px'
  canvas-id="myCanvas" bindtouchstart="start" bindtouchmove='move' bindtouchend='end'>
  </canvas>
</view>

简单的应用是判断用户单击、长按还是滑动？
这里还有个问题就是同时设置bindtap和start这三个事件的时候涉及到一个触发顺序的问题。网上的资料说的是先触发start move end再触发end方法。

/*用户手指滑动的起点*/
  start: function (e) {
    var a = e.changedTouches[0].x
    var b = e.changedTouches[0].y
    console.log("用户手指滑动的起点：", a, b)
    //存一下起点的时间
    this.setData({
      startTime:e.timeStamp
    })
  },
  /*用户手指滑动中途经的点*/
  move: function (e) {	},
  /*用户手指滑动结束抬起手指*/
  end: function (e) {
  	if(e.timeStamp-this.data.startTime<100){//do something}
  }

Canvas绘图

因为在用小程序做地图相关的东西，所以用了一些基础的绘图canvas语句。因为相关的东西文档上都特别的详细就不搬运了.(摊手手~)

ctx.clearRect(0, 0, w, h)				//指定范围清空画布
ctx.drawImage(url, nx, ny, w, h)		//把指定图片画到指定区域
ctx.moveTo(a+nx-25, b+ny-25)			//移动起点
ctx.lineTo(100， 100)					//画一条线
ctx.draw()								//绘制canvas

查询数据库

小程序查询数据库和ajax相似，好像只能是异步请求，无刷新的，所以要在回调函数里写东西。
app.json里补一句

  "cloud": true

云函数查数据库初始化。注意小程序查询默认最大一次返回20条记录，limit方法可以设置返回的记录数，更具体的方法官网写的非常详细了。
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-server-api/database/
promise风格查询（小程序版本调高就有async的东西了）

const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
exports.main = async (event, context) => await db.collection('todos').where({
  _openid: 'xxx' // 填入当前用户 openid
}).get()

核心方法

	// 初始化数据库
    const db = wx.cloud.database();
    const _ = db.command;
    db.collection('xxx').where({
      userName: xxx
    }).get({
      success: function (res) {
      		//do something
      }
    })

云函数查询数据库可以做到突破20的限制，一次查询出多于20条的数据。初始化方法如下，写在app.js里

wx.cloud.init({ env: 'pathmaster-mtzbo' })
    this.vertexes = 22
    console.log(this.vertexes)
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        traceUser: true,
      })
    }

云函数模板，注册就可以用了

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
  try {
    return await db.collection('vertexes').get({
      success: function (res) {
        console.log(res)
      }
    });
  }catch(e){
    console.error(e)
  }
}

简单应用

wx.cloud.callFunction({
    name: 'callDatabase',
    complete: res => {
      console.log(res.result.data)
      //初始化（ax,ay）并同时找出终点索引值
      let ex = app.endVertexx
      let ey = app.endVertexy
      for (let index = 0; index < 22; index++) {
        let ax = res.result.data[index].vertexX
        let ay = res.result.data[index].vertexY
        if (ax == ex && ay == ey){
          endVertexIndex = index
          console.log("找到终点为：",index)
        }
        //找到距离起点最近的地图结点
        let dist = parseInt(Math.sqrt((ax - a) * (ax - a) + (ay - b) * (ay - b)))
        if (dist < minn) { minn = dist, minnindex = index }
        let posx = "point[" + index + "].posx"
        let posy = "point[" + index + "].posy"
        that.setData({
          [posx]: ax,
          [posy]: ay,
        })
      }
      console.log("回调成功最小值为", minn, "最小值索引值为", minnindex, f1, f2)
      //接下来初始化距离数组
      for (let i = 0; i < 22; i++) {
        for (let j = 0; j < 22; j++) {
          if(that.data.matrix2[i][j]==1){
            let w = parseInt(Math.sqrt((that.data.point[i].posx - that.data.point[j].posx) * (that.data.point[i].posx - that.data.point[j].posx) + (that.data.point[i].posy - that.data.point[j].posy) * (that.data.point[i].posy - that.data.point[j].posy)))
            let m = "matrix[" + i + "][" + j + "]"
            that.setData({
              [m]: w
            })
          }
        }
      }