专栏首页达达前端小程序页面跳转传参-this和that的区别-登录流程-下拉菜单-实现画布自适应各种手机尺寸

小程序页面跳转传参-this和that的区别-登录流程-下拉菜单-实现画布自适应各种手机尺寸

小程序页面跳转传参-this和that的区别-登录流程-下拉菜单-实现画布自适应各种手机尺寸

小程序页面跳转传参

根目录下的 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)
  }
})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序高级基础

    小程序是什么呢?小程序是一种不需要下载安装就可以使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下就可以打开应用,也体现了龙哥"用完即走"的理念,...

    达达前端
  • (27)打鸡儿教你Vue.js

    当含有index时,以前传递的参数顺序是: (index, value)。现在(value, index)

    达达前端
  • 前端技术前沿10

    允许用户从NPM服务器下载别人编写的第三方包到本地使用。 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 允许用户将自己编写的包或命令行程...

    达达前端
  • Flutter借用package.json管理Flutter常用命令

    Flutter的命令一般比较长,而个人“年纪大了”常记不太清楚,考虑电脑有node的环境,所以干脆利用package.json来管理一些常用命令:

    IT晴天
  • Flutter 侧滑栏及城市选择UI的实现方法

    Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutte...

    砸漏
  • 纯Flutter工程如何实现Flutter与原生互相通信

    大多数同学都知道Flutter与原生通信MethodChannel或者EventChannel。这两个Channel在我之前的文章中有讲到区别和共同点,我们知道...

    brzhang
  • JS网页跳转

    猫狗鼠鱼
  • 【java基础】zip压缩文件

    用户5640963
  • JVM堆引发swap的情况分析

    虚拟机技术可以使得一个只有1g物理内存的机器可以运行总共需要4g内存的任务,主要方法是通过虚拟内存和物理内存映射来实现的,当物理内存不够用的时候,可以通过swa...

    春哥大魔王
  • [Leetcode][python]Permutation Sequence/第k个排列

    来自:http://www.cnblogs.com/zuoyuan/p/3785530.html 我采用的方法是计算第k个Permutation。 假设...

    后端技术漫谈

扫码关注云+社区

领取腾讯云代金券