微信小程序：快速入门

微信小程序：快速入门

最近在做学校的课题，使用的是微信小程序wxml。以前学过html，所以上手没难度，就是一些规则需要理解而已。

刚开始的时候我还有点鄙夷，不屑去学，感觉就是html的盗版。但是入门之后我发现还是很有意思的，很多实现方法还有接口都挺好用。

---

总纲

page是一个页面的意思，创建时会生成.js.json.wxml.wxss四个文件，wxml和wxss就是html和css文件，语句形式都相同。

新建目录，在目录中新建page即可创建。创建好后在app.json的pages项中会自动添加这个页面的url。pages的第一个页面就是起始页。

app.都不要去管，以后用到再说

Begin-wxml

在index页面中编写wxss和wxml

• div改为view，p改为text；
• wxml没有body，直接堆view即可；
• 函数等内容全部写在js中即可；
• 点击事件改为bindtap，bindtap='toSearch'，其中toSearch写在js的Page({})中。

js部分

js用于存储用到的函数、变量、页面数据，而绝大部分都写在Page({})中。

• data:{}中存用到的数据，可存数组
• 函数或者变量的调用默认从根开始，例如一个函数要调用acher[1].name，而这个函数在Page中，那么应该使用acher[1].name。
• 当因为函数或框架使得this不指向Page时，应该在外部var that=this，然后用that
• Page中有onLoad、onShow等函数，指定页面加载、展示时触发，详细百度。

json部分

json存的是一个页面的配置，例如背景颜色、页面标题等，一般来说无视即可。

---

函数、功能讲解（js）

控制台记录日志：

console.log('xxxx')

定时触发：

// 1000ms
setTimeout(function () {do something
}, 1000)

循环执行：

// 1000ms
setInterval(function () {do something
}, 1000)

返回父级页面

// delta为跳跃层数
wx.navigateBack({delta:1
})

转到子页面：

wx.navigateTo({url: '/pages/p1/p1',
})

提示框：

wx: wx.showToast({title:'内容不能为空!',duration: 2000,image: "/images/cant.png"
})

交互框：

wx.showModal({title: '提示',content: '是否提交？',success(res) {// 确认是触发 if (firm) {wx: wx.showToast({title: '提交成功!',icon: true,duration: 800,})// 返回父页面setTimeout(function () {wx.navigateBack({delta:1})}, 1000)}// 取消时触发else if (res.cancel) {console.log('用户点击取消')}}
})

text绑定

占位符：placeholder='xxx'
文字内容变化时触发：bindinput='charChange'

js数组使用

添加：arr.push(node)
删除从索引 i i i开始的j个元素：arr.splice(i,j)
删除最后一个元素：arr.pop()

wxml中的值使用js的data中的值：

<text>{{name}}</text>

//js:
Page({data:{name:''}
})

更改时需要用setData，页面才会重新用新的值进行渲染：

set :function(){this.setData({name:'newName'})
}

模糊匹配：

var reg = new RegExp('搜索文字');
if(string.match(reg)){匹配成功！
}

跳转到非tapbar页面并传递参数：

wx.navigateTo({url: '/pages/p1/p1?'+ 'name=xxx&&'      + 'tele=xxx&&'+ 'home=xxx&&'})

p1使用options接受参数:

onLoad: function (options) {var that = this;that.setData({name: options.name,home: options.home,tele: le})console.log(that.data)}

跳转到tapbar页面时不能传递参数，所以使用页面栈的形式修改目标页面的参数后再跳转：

因为app.globaldata那个全局变量不能用，加载问题什么的

//假设跳到上一个页面var pages=getCurrentPages();var index=pages[pages.length-2];index.setData({...})

使用wx:if来实现在一定条件下才展示，否则隐藏该标签：

<!--wxSearchData在page的data中 -->
<image class='textImage' wx:if="{{wxSearchData.length > 0}}"></image>

不知道view标签的个数，需要根据数据来动态生成时，使用wx:for：

// js 部分data:{result:[{idx:'',name:''},{idx:'',name:''},{idx:'',name:''}]}

<!-- 根据result的个数生成view-->
<!-- wx:for循环生成多个view时，{{item.属性名}}可以获取数组中元素的属性值 -->
<!-- 整个对象树内，都可以用item访问 -->
<!-- wx:key为标识键-->
<view data-idx='{{item.idx}}' wx:for ="{{result}}" wx:key="{{item.idx}}"><text>{{item.name}}</text>
</view>

map相关

<map subkey='{{qqMapKey}}' id="mapid" longitude="{{longitude}}"latitude="{{latitude}}" scale="{{scale}}" controls="{{controls}}"bindcontroltap="getLocationAndGo" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange"show-location style="width: 100%; height: 100%;position:relative;">
</map>

subkey：API申请的key
longitude latitude：地图中心的经纬度
scale：地图的缩放比例
controls：固定在地图上的控制点
markers：地图上的标记点
polyline：地图上的画线
bindcontroltap：控制点的点击事件
bindmarkertap：标记的点击事件
bindregionchange：地图移动位置时

标记实例：

markers:[{iconPath: "../../images/1.png",id: 0,latitude: 29.1344033932,longitude: 119.6412760706,width: 25,height: 38}]

控制点实例：

controls: [{id: 1,iconPath: '../../images/my.png',position: {left: 20,top: 300,width: 30,height: 30},clickable: true
}]

画线实例：

polyline: [{points: b,// b为点数组，包含经纬度属性color: '#000000',width: 4,dottedLine: false}]

使用API获取当前位置：（需要GPS权限）

//全局
// 我的位置
var mylatitude = ""
var mylongitude = ""
var myaddress=""
var QQMapWX = require('../../src/qqmap-wx-jssdk.min.js');//下载官方SDK包
var qqmapsdk;//page内
getLocation: function () {qqmapsdk = new QQMapWX({key: this.data.qqMapKey//你的key});var that = Location({type: 'gcj02',success: function (res) {mylatitude = res.latitude;mylongitude = res.longitude;// 通过坐标逆解析地点名verseGeocoder({location: {latitude: res.latitude,longitude: res.longitude},success: function (addressRes) {var address = sult.end;myaddress = address;console.log("所在位置：" + myaddress + "(" + mylatitude + "," + mylongitude + ")")}})}})},

通过API画出两个点之间的路线：

需要访问apis.map.qq，自行百度相关设置

onReady: function () {this.mapCtx = wx.createMapContext('mapid'); // map为地图的id
},link:function(){var that = quest({// walking换成driving就是行车路线 url: '/?from=(la,lo)&to=(la,lo)'+'&output=json&callback=cb&key=yourKey',success: function (res) {var coors = utes[0].polylinefor (var i = 2; i < coors.length; i++) {coors[i] = coors[i - 2] + coors[i] / 1000000}console.log(coors)//划线var b = [];for (var i = 0; i < coors.length; i = i + 2) {b[i / 2] = {latitude: coors[i], longitude: coors[i + 1]};console.log(b[i / 2])}that.setData({polyline: [{points: b,color: '#000000',width: 4,dottedLine: false}],})// 让地图包含起点和终点that.mapCtx.includePoints({padding: [100, 80, 100, 80],points: [{ latitude: that.data.markers[0].latitude, longitude: that.data.markers[0].longitude},{ latitude: that.data.markers[1].latitude, longitude: that.data.markers[1].longitude }]})}})},

百度地图坐标转换为腾讯地图坐标：

var len=this.data.location.length;var that=this;for (var i = 0; i < len; i++) {let lng = that.data.location[i].lo;let lat = that.data.location[i].la;let x_pi = (3.14159265358979324 * 3000.0) / 180.0;let x = lng - 0.0065;let y = lat - 0.006;let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);let theta = Math.atan2(y, x) - 0.000003 * s(x * x_pi);let lngs = z * s(theta);let lats = z * Math.sin(theta);that.data.location[i].lo = lngs;that.data.location[i].la = lats;}this.setData({location:that.data.location})

云端数据库使用

开发工具内点击云开发，在数据库中使用json导入数据即可。

json数据格式如下：

{"name": "张三","course": "语文","tele": "13212376576","mail": "1287318@qq","office_x": "26幢教学楼","office_y": "312"
}
{"name": "李四","course": "数学","tele": "13212376576","mail": "1287318@qq","office_x": "27幢教学楼","office_y": "312"
}

成功导入：

通过页面的js来添加数据：

  res: function(e) {const db = wx.cloud.database()db.collection('user').add({//user表data: {username: e.detail.value.username},success: res => {// 在返回结果中会包含新创建的记录的 _idthis.setData({username: e.detail.value.username})wx.showToast({title: '新增记录成功',})console.log('[数据库] [新增记录] 成功，记录 _id: ', res._id)},fail: err => {wx.showToast({icon: 'none',title: '新增记录失败'})('[数据库] [新增记录] 失败：', err)}})},

最重要的应用：通过js下载云数据

此方法只能调用前20条结果，很坑

	var that = this;// 下载教师和地址数据const db = wx.cloud.database({env: 'xxx-cd9e8f' //环境ID})db.collection('teacher').get({success: res => {that.setData({teacher: res.data})}})   

云函数

接上面的话题，js只能一次调用20个数据，所以我们转云函数。

在cloudfunctions右键-新建node.js，设个名字

如果之后要改名，需要将相关配置文件的name改掉

在index.js中贴上官方的查询数据库所有数据的代码（就是一次100的查完数据）

const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
const MAX_LIMIT = 100
exports.main = async (event, context) => {// 先取出集合记录总数const countResult = llection('zjnu_teacher').count()const total = al// 计算需分几次取const batchTimes = il(total / 100)// 承载所有读操作的 promise 的数组const tasks = []for (let i = 0; i < batchTimes; i++) {const promise = db.collection('zjnu_teacher').skip(i * MAX_LIMIT).limit(MAX_LIMIT).get()tasks.push(promise)}// 等待所有return (await Promise.all(tasks)).reduce((acc, cur) => {return {data: at(cur.data),errMsg: Msg,}})
}

云函数需要下载依赖才能使用，去下载nodejs，安好后，使用cd将目录切到具体云函数的文件夹内。

使用npm install --save wx-server-sdk@latest安装依赖。

你会发现目录下多了上图中的package-lock.json，再在微信工具的文件夹右键-上传并部署所有文件即可。

js内应用：

var that = this;wx.cloud.callFunction({name: 'search_teacher',complete: res => {that.setData({teacher: sult.data})},})  

发送邮件

云函数部分：

const cloud = require('wx-server-sdk')
cloud.init()
//引入发送邮件的类库
var nodemailer = require('nodemailer')
// 创建一个SMTP客户端配置
var config = {host: 'smtp.qq', //网易163邮箱 smtp.163port: 465, //网易邮箱端口 25auth: {user: '...', //邮箱账号pass: '...' //邮箱的授权码}
};
// 创建一个SMTP客户端对象
var transporter = ateTransport(config);
// 云函数入口函数
exports.main = async (event, context) => {// 创建一个邮件对象var mail = {// 发件人from: 'zjnuMap <1834131427@qq>',// 主题subject: 'zjnuMap',// 收件人to: event.Email,// 邮件内容，text或者html格式text: '来自 '+event.From+' 的反馈：nn'+'内容：n'+event.Context //可以是链接，也可以是验证码};let res = await transporter.sendMail(mail);return res;
}

调用：

wx.cloud.callFunction({name:'send_email',data:{From:that.data.From,Context:t,Email:'your email',},complete: console.log('send successed')
})