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

ゞ浴缸里的玫瑰 2021-09-19 09:14 310阅读 0赞

app.json

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

index.wxml

<text>Hello World</text>

index.js

Page({})

![image.png][]

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

<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 >

<view> {
       {a + b}} + {
       {c}} + d </view>

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

<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。

<template name="item">
      <text>{
       {text}}</text>
    </template>
    
    <import src="item.wxml"/>
    
    <template is="item" data="{
       {text: 'forbar'}}"/>
    
    
    <template name="A">
      <text> A template </text>
    </template>
    
    
    <import src="a.wxml"/>
    
    <template name="B">
      <text> B template </text>
    </template>
    
    
    <import src="b.wxml"/>
    
    <template is="A"/>  
    
    <template is="B"/>

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

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

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

![image.png][image.png 1]

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

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

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

<view style="color: {
       {eleColor}}; font-size: {
       {eleFontsize}}"></view>

![image.png][image.png 2]

## 官方样式库 ##

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

语法  
类型  
语句  
关键字  
操作符  
对象

![image.png][image.png 3]

// 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' })
      }
    })

![image.png][image.png 4]

![image.png][image.png 5]

![image.png][image.png 6]

![image.png][image.png 7]

![image.png][image.png 8]

![image.png][image.png 9]

![image.png][image.png 10]

![image.png][image.png 11]

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.navigateTo	onHide	onLoad, onShow
    页面重定向 调用	API wx.redirectTo	onUnload	onLoad, onShow
    页面返回 调用	API wx.navigateBack	onUnload	onShow
    Tab	切换 调用 API wx.switchTab	请参考表3-6	请参考表3-6
    重启动	调用 API wx.reLaunch	onUnload	onLoad, onShow

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

<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 动画完成时触发

type	String	事件类型
    timeStamp	Integer	页面打开到触发事件所经过的毫秒数
    target	Object	触发事件的组件的一些属性值集合
    currentTarget	Object	当前组件的一些属性值集合
    detail	Object	额外的信息
    touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
    changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

bindtap、catchtouchstart

![image.png][image.png 12]

[https://developers.weixin.qq.com/ebook?action=get\_post\_info&token=935589521&volumn=1&lang=zh\_CN&book=miniprogram&docid=00080e799303986b0086e605f5680a][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.js
    
    var 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.js
    
    App({
    
      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.js
    
    Page({
    
      // 点击“扫码订餐”的按钮，触发tapScan回调
    
      tapScan: function() {
    
        // 调用wx.login获取微信登录凭证
    
        wx.scanCode({
    
          success: function(res) {
    
            var num = res.result // 获取到的num就是餐桌的编号
    
          }
    
        })
    
      }
    
    })

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

//page.js
    
    Page({
    
      // 点击“预览文档”的按钮，触发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环境' })
    
            }
    
          }
    
        })
    
      }
    
    })

![image.png][image.png 13]

![image.png][image.png 14]

![image.png][image.png 15]

![image.png][image.png 16]

--------------------

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

![官方微信公众号][1240]

吹逼交流群：**711613774**

![吹逼交流群][1240 1]

[image.png]: /images/20210724/b82adfc7c6f74729bb20b35d5c75cf01.png
[image.png 1]: /images/20210724/8b5a28ade35f48e1a2f61972a9f34139.png
[image.png 2]: /images/20210724/48510871c949492aa14119a4f6caa41d.png
[https_github.com_Tencent_weui-wxss]: https://github.com/Tencent/weui-wxss
[image.png 3]: /images/20210724/42ac4481ec1241728485c24bd19cf56e.png
[image.png 4]: /images/20210724/f35cd305a8bd429595d3fd69759d288d.png
[image.png 5]: /images/20210724/b4b33ffc81844f8e89ad6b1874abe1c8.png
[image.png 6]: /images/20210724/84e5f7be1c724c7ea33f46a84683debf.png
[image.png 7]: /images/20210724/cd8adf3d16d14369b1259981dc792643.png
[image.png 8]: /images/20210724/aedaf551f9244949b60ad1db0068c761.png
[image.png 9]: /images/20210724/b1ef616046f2481688458bc8ca29be4e.png
[image.png 10]: /images/20210724/391851398b8b4dddbdd096624c57a8a6.png
[image.png 11]: /images/20210724/c0909758460145d2bfecf16e46b11d21.png
[image.png 12]: /images/20210724/43451c6c96234e27b3b3a9c549964a6d.png
[https_developers.weixin.qq.com_ebook_action_get_post_info_token_935589521_volumn_1_lang_zh_CN_book_miniprogram_docid_00080e799303986b0086e605f5680a]: https://developers.weixin.qq.com/ebook?action=get_post_info&token=935589521&volumn=1&lang=zh_CN&book=miniprogram&docid=00080e799303986b0086e605f5680a
[image.png 13]: /images/20210724/c5dba33bd3514304a0d4f42253d1e0d5.png
[image.png 14]: /images/20210724/1870683439934583bb54524813adc02c.png
[image.png 15]: /images/20210724/26e94bfe709b419d93c75e95ecd10b81.png
[image.png 16]: /images/20210724/4009bc2c5c9f4b7392da45444e69e0bb.png
[1240]: /images/20210724/b5f9587bcae241daba61a29a5519a45d.png
[1240 1]: /images/20210724/b77375a8fe4f4ecebfa80a27cabf7a6a.png