全栈开发工程师微信小程序-下

app.json

{ "pages": ["pages/index/index"]}


index.wxml

<text>Hello World</text>


index.js

Page({})


{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}


<!--pages/wxml/index.wxml-->
<text>当前时间：{{time}}</text>// pages/wxml/index.js
Page({
/**
* 页面的初始数据
*/
data: {
time: (new Date()).toString()
},
})


<!-- 正确的写法 -->
<text data-test="{{test}}"> hello world</text><!-- 错误的写法 -->
<text data-test={{test}}> hello world </text >


<!--
{ a: 1, b: 2, c: 3 }
--><view> {{a + b}} + {{c}} + d </view><!-- 输出 3 + 3 + d -->


<view wx:if="{{condition}}"> True </view><view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view><block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>


<!-- array 是一个数组 -->
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view><!-- 对应的脚本文件
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
-->


<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>


<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>


WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>


<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template><template is="msgItem" data="{{...item}}"/>


WXML 提供两种文件引用方式import和include。

<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template><import src="item.wxml"/><template is="item" data="{{text: 'forbar'}}"/><!-- A.wxml -->
<template name="A">
<text> A template </text>
</template><!-- B.wxml -->
<import src="a.wxml"/><template name="B">
<text> B template </text>
</template><!-- C.wxml -->
<import src="b.wxml"/><template is="A"/> <!-- 这里将会触发一个警告，因为 b 中并没有定义模板 A --><template is="B"/>


include 可以将目标文件中除了 外的整个代码引入

<!-- index.wxml -->
<include src="header.wxml"/><view> body </view><include src="footer.wxml"/>


data-*Any自定义属性组件上触发的事件时，会发送给事件处理函数
bind*/catch*EventHandler组件的事件


在WXSS中，引入了rpx（responsive pixel）尺寸单位。

@import url('./test_0.css')


小程序支持动态更新内联样式：

<!--index.wxml--><!--可动态变化的内联样式-->
<!--
{
eleColor: 'red',
eleFontsize: '48rpx'
}
-->
<view style="color: {{eleColor}}; font-size: {{eleFontsize}}"></view>


官方样式库

具体使用文档可参考：https://github.com/Tencent/weui-wxss

语法

类型

语句

关键字

操作符

对象

// moduleA.js
module.exports = function( value ){
return value * 2;
}// 在B.js中引用模块A
var multiplyBy2 = require('./moduleA')
var result = multiplyBy2(4)var common = require('common.js')
Page({
helloMINA: function() {
common.sayHello('MINA')
},
goodbyeMINA: function() {
common.sayGoodbye('MINA')
}
})


使用全局函数 getApp() 获取全局的实例

// a.js
// 获取全局变量
var global = getApp()
global.globalValue = 'globalValue'// b.js
// 访问全局变量
var global = getApp()
console.log(global.globalValue) // 输出 globalValue


// a.js
// 局部变量
var localValue = 'a'// 获取 global 变量
var app = getApp()// 修改 global 变量
app.globalData++ // 执行后 globalData 数值为 2// b.js
// 定义另外的局部变量，并不会影响 a.js 中文件变量
var localValue = 'b'// 如果先执行了 a.js 这里的输出应该是 2
console.log(getApp().globalData)


<view>{{ msg }}</view>Page({
onLoad: function () {
this.setData({ msg: 'Hello World' })
}
})


App({
onLaunch: function (options) {
console.log("app.js ---onLaunch---" + JSON.stringify(options));
},
onShow:function(){
console.log("app.js ---onShow---");
},
onHide:function(){
console.log("app.js ---onHide---");
},
onError: function (msg){
console.log("app.js ---onError---" + msg);
},
globalData: {
userInfo: null
}
})


Page({
onLoad: function (options) {
console.log("page ---onLoad---");
},
onReady: function () {
console.log("page ---onReady---");
},
onShow: function () {
console.log("page ---onShow---");
},
onHide: function () {
console.log("page ---onHide---");
},
onUnload: function () {
console.log("page ---onUnload---");
}
})


初始化小程序打开的第一个页面onLoad, onShow
打开新页面 调用API wx.navigateToonHideonLoad, onShow
页面重定向 调用API wx.redirectToonUnloadonLoad, onShow
页面返回 调用API wx.navigateBackonUnloadonShow
Tab切换 调用 API wx.switchTab请参考表3-6请参考表3-6
重启动调用 API wx.reLaunchonUnloadonLoad, onShow


wx.request({
url: 'test.php',
data: {},
header: { 'content-type': 'application/json' },
success: function(res) {
// 收到https服务成功后返回
console.log(res.data)
},
fail: function() {
// 发生网络错误等情况触发
},
complete: function() {
// 成功或者失败后触发
}
})


<!-- page.wxml -->
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>// page.js
Page({
tapName: function(event) {
console.log(event)
}
})


touchstart手指触摸动作开始
touchmove手指触摸后移动
touchcancel手指触摸动作被打断，如来电提醒，弹窗
touchend手指触摸动作结束
tap手指触摸后马上离开
longpress手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
longtap手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart会在一个 WXSS animation 动画开始时触发
animationiteration会在一个 WXSS animation 一次迭代结束时触发
animationend会在一个 WXSS animation 动画完成时触发


typeString事件类型
timeStampInteger页面打开到触发事件所经过的毫秒数
targetObject触发事件的组件的一些属性值集合
currentTargetObject当前组件的一些属性值集合
detailObject额外的信息
touchesArray触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouchesArray触摸事件，当前变化的触摸点信息的数组


bindtap、catchtouchstart

https://developers.weixin.qq.com/ebook?action=get_post_info&token=935589521&volumn=1&lang=zh_CN&book=miniprogram&docid=00080e799303986b0086e605f5680a

获取微信登录凭证code

发送code到开发者服务器

到微信服务器换取微信用户身份id

绑定微信用户身份id和业务用户身份

业务登录凭证SessionId

wx.getStorage/wx.getStorageSync读取本地数据缓存

每个小程序的缓存空间上限为10MB，如果当前缓存已经达到10MB，再通过wx.setStorage写入缓存会触发fail回调。

要实现了一个购物商城的小程序，首页是展示一堆商品的列表。

Page({ onLoad: function() { var that = this wx.request({ url: 'https://test.com/getproductlist', success: function (res) { if (res.statusCode === 200) { that.setData({ list: res.data.list }) } } }) }})


在onLoad发起请求前，先检查是否有缓存过列表，如果有的话直接渲染界面

Page({ onLoad: function() { var that = this var list =wx.getStorageSync("list") if (list) { // 本地如果有缓存列表，提前渲染 that.setData({ list: list }) } wx.request({ url: 'https://test.com/getproductlist', success: function (res) { if (res.statusCode === 200) { list = res.data.list that.setData({ // 再次渲染列表 list: list }) wx.setStorageSync("list",list) // 覆盖缓存数据 } } }) }})


缓存用户登录态SessionId

//page.jsvar app = getApp()Page({ onLoad: function() { // 调用wx.login获取微信登录凭证 wx.login({ success: function(res) { // 拿到微信登录凭证之后去自己服务器换取自己的登录凭证 wx.request({ url: 'https://test.com/login', data: { code: res.code }, success: function(res) { var data = res.data // 把 SessionId 和过期时间放在内存中的全局对象和本地缓存里边 app.globalData.sessionId =data.sessionId wx.setStorageSync('SESSIONID',data.sessionId) // 假设登录态保持1天 var expiredTime = +new Date() +1*24*60*60*1000 app.globalData.expiredTime =expiredTime wx.setStorageSync('EXPIREDTIME',expiredTime) } }) } }) }})


//app.jsApp({ onLaunch: function(options) { var sessionId =wx.getStorageSync('SESSIONID') var expiredTime =wx.getStorageSync('EXPIREDTIME') var now = +new Date() if (now - expiredTime <=1*24*60*60*1000) { this.globalData.sessionId = sessionId this.globalData.expiredTime = expiredTime } }, globalData: { sessionId: null, expiredTime: 0 }})


利用wx.scanCode获取二维码的数据

//page.jsPage({ // 点击“扫码订餐”的按钮，触发tapScan回调 tapScan: function() { // 调用wx.login获取微信登录凭证 wx.scanCode({ success: function(res) { var num = res.result // 获取到的num就是餐桌的编号 } }) }})


获取网络状态 利用wx.getNetworkType获取网络状态

//page.jsPage({ // 点击“预览文档”的按钮，触发tap回调 tap: function() { wx.getNetworkType({ success: function(res) { // networkType字段的有效值： // wifi/2g/3g/4g/unknown(Android下不常见的网络类型)/none(无网络) if (res.networkType == 'wifi') { // 从网络上下载pdf文档 wx.downloadFile({ url:'http://test.com/somefile.pdf', success: function (res) { // 下载成功之后进行预览文档 wx.openDocument({ filePath: res.tempFilePath }) } }) } else { wx.showToast({ title: '当前为非Wifi环境' }) } } }) }})


---

请点赞！因为你的鼓励是我写作的最大动力！

吹逼交流群：711613774