参加了微信小程序的比赛,记录下小程序开发的各种坑。
盒子模型
小程序的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
})
}
}
}