小程式頁面跳轉傳參

根目錄下的 app.json 檔案

頁面檔案的路徑、視窗表現、設定網路超時時間、設定多 tab

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日誌"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "navigateToMiniProgramAppIdList": [
    "wxe5f52902cf4de896"
  ]
}
 

  "navigateToMiniProgramAppIdList": [
    "wxe5f52902cf4de896"
  ]

wx.navigateToMiniProgram({
  appId: '',
  path: 'pages/index/index?id=1',
  success(res) {
    // 開啟成功
  }
})

this指的是當前的物件
that指的是一個臨時的變數

登入流程

1. 呼叫微信API wx.login() -> code
2. 得到的code傳給後端

https://api.weixin.qq.com/sns/jscode2session
 

使用者唯一標識（openid）傳給前端並儲存

獲取code, 請求微信小程式官方介面:

https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

小程式呼叫wx.login() 獲取 登入憑證code ，並回傳到開發者伺服器
呼叫介面wx.login() 獲取臨時登入憑證（code）

開發者伺服器以code換取 使用者唯一標識openid 和 會話金鑰session_key

//app.js
App({
  onLaunch: function() {
    wx.login({
      success: function(res) {
        if (res.code) {
          //發起網路請求
          wx.request({
            url: 'https://test.com/onLogin',
            data: {
              code: res.code
            }
          })
        } else {
          console.log('登入失敗！' + res.errMsg)
        }
      }
    });
  }
})
 

下拉選單

<view class='nav_centent_arr' wx:if="{{nav_centent.length}}">
  <view style="height:408rpx">
    <block wx:for="{{nav_centent}}" wx:key="index">
      <view class='nav_centent'>{{item}}</view>
    </block>
  </view>
</view>

click_nav: function (e) {
    if (index == e.currentTarget.dataset.index && this.data.nav_centent != null){
      index = e.currentTarget.dataset.index;
      this.setData({
        nav_centent: null,
        shownavindex: null,
      })
    } else if (this.data.nav_centent == null) {
      console.log(11)
      index = e.currentTarget.dataset.index;
      this.setData({
        shownavindex: index,
        nav_centent: nav_centent_list[Number(index)]
      })
    } else {
      console.log(22)
      index = e.currentTarget.dataset.index;
      this.setData({
        shownavindex: index,
        nav_centent: nav_centent_list[Number(index)]
      })
    }
  }

nav_title:['1','2','3','4'],
    shownavindex: null,
    nav_centent: null

radioChange 是單選框選中事件

radio 是點選事件,用於獲取點選的該元件的id

// 獲取該元件的id
  radio:function(e){
    this.setData({
      guige_key02: e.currentTarget.dataset.id
    })
    console.log(e.currentTarget.dataset.id)
  },
  // 發貨地址選擇,獲取使用者選擇的單選框的值
  radioChange: function (e) {
    this.setData({
      arr_guige02: e.detail.value
    })
    console.log(e.detail.value)
  },

<checkbox-group bindchange="checkboxChange">
  <label class="checkbox" wx:for="{{items}}">
    <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
  </label>
  </checkbox-group>

Page({
  data: {
    items: [
      { name: 'USA', value: '美國' },
      { name: 'CHN', value: '中國', checked: 'true' },
      { name: 'BRA', value: '巴西' },
      { name: 'JPN', value: '日本' },
      { name: 'ENG', value: '英國' },
      { name: 'TUR', value: '法國' },
    ]
  },
  checkboxChange: function (e) {
    console.log('checkbox發生change事件，攜帶value值為：', e.detail.value)
  }
})

實現畫布自適應各種手機尺寸

解決的問題：

畫布，動畫等js裡面的操作，預設是px而不是rpx, 無法根據手機螢幕自適應

獲取節點的rpx -> px單位

  <view id='canvas-container' style='width:200rpx;height:100rpx;'>
      wx.createSelectorQuery().select('#canvas-container').boundingClientRect(function (rect) {
      var width = rect.width/2   // 節點的寬度
    }).exec()

    wx.getSystemInfo({
      success: function(res) {
        myCanvasWidth = res.windowWidth - 56
        myCanvasHeight = res.windowHeight - 200
      },
    })
    this.setData({
      canvasWidth: myCanvasWidth,
      canvasHeight: myCanvasHeight
    })

  <canvas class='canvas' style='width:{{canvasWidth}}px; height:{{canvasHeight}}px'  disable-scroll='true'>
  </canvas>

Page({
 data: {
     id:''
  },
 onLoad: function (options){
    var that = this;
    that.setData({
       id: options.id
    })
    console.log(that.data.id)
  }
})