微信小程序学习-3

前言

第三天，跟着b站课程学习的一天，后面会继续完善我的程序，现在具体不知道搞什么先弄个用户页面吧。打算做一个人工智能的程序，应该挺简单的吧。

ps本篇除了特殊注释链接都是微信官方文档的

一、页面跳转

1.1准备

新创建页面redirect页面

1.2对标签绑定点击事件

然后再index页面上面编写

<view bind:tap="clickMe">点击我跳转</view>

• bind:tap绑定事件
• 然后再Index,js里面 clickMe:function()事件，其中fucntion理解是关于函数
• 在里面增加console.log('点我了');

console的解释，查看事件，查看传值情况

console | 微信开放文档 (qq.com)

定义data-nid="123"

所有传的参数都会在dataset里面

• var申明的变量是全局变量，其作用域为所在的函数内。

var nid 定义变量nid

function(e)传值 

e.currentTarget.dataset.nid意思是在e的事件的currentTarget下面的dataset参数nid的值

console.log(nid);查看传值情况

  clickMe:function(e){
    var nid=e.currentTarget.dataset.nid;
    console.log(nid);
  }

1.3页面跳转

使用index.js中使用wx.navigateTo函数

路由 / wx.navigateTo (qq.com)

clickMe:function(e){
    var nid=e.currentTarget.dataset.nid;
    console.log(nid);
    //跳转
    wx.navigateTo({
      url: '/page/redirect/redirect?id='+nid,//参数与路径之间使用 ? 分隔
    })
  }

在redirect.js

 onLoad(options)：跳转页面如果想要接收参数

/*跳转过来自动执行方法 */
  onLoad(options) {
    console.log(options);//options获取参数
  },

• 可以引用每个商品的详细页面，和后台数据库相连 

 二、数据绑定

2.1数据绑定

setData:实现数据通信，this.setData({})用于将数据从逻辑层发送到视图层（异步）

性能与体验 / 运行时性能 / 合理使用 setData (qq.com)

home.xwml

<text>数据绑定</text>
<view>数据1：{{message}}</view>
<view>数据2：{{message}}</view>
<button bind:tap="changeData">点击修改数据</button>

home.js

创建changeData的动作

changeData:function(){
    //this当前字典对象
    //获取数据
    console.log(this.data.message);
    //修改(错误的方式，只修改了后端，前端一直是11)
    //this.data.message="22";
    //查看是都改变
    //console.log(this.data.message)
    this.setData({message:"22"});
  }

三、用户信息绑定

3.1wx.getUserInfo(Object object)：已经不适用了

开放接口 / 用户信息 / wx.1.2 (qq.com)

home.wxml

name,path是定义的变量

<view>当前用户名：{{name}}</view>
<view>当前用户头像:
  <image src="{{path}}" style="height: 200rpx;width: 200rpx;"/>
</view>
<button bind:tap="gatUserName">获取当前用户名</button>

home.js

用了wx.openSetting({})去修改设置

var that=this;

this：在js中，this用以指代当前对象，但是this随着程序进行，所处环境不同，也是会一直变化的

that:变量

使用that=this可以让this不变

 data: {
    message:"11",//与wxml message绑定
    name:"",
    path:"/img/互联网职业男.png"//头像默认值做一个双向绑定
  },

/*获取用户信息 */
  gatUserName:function(){
    var that=this;//固定对象
    //console.log('sdf');
    wx.getUserInfo({
      //调用微信的接口，获取当前用户信息
      success:function(res){
        console.log(this)
        //调用成功后触发
        console.log('success',res.userInfo.nickName)
        //this代指外面的大字典，如果里面使用this就是代指gatUserName:function()的数据可是里面并没有setdata()的变量，所以我们要在外面使用that=this代指外面的page
        //里面使用this出现this.setData is not a function
        that.setData({
          name : res.userInfo.nickName,
          path : res.userInfo.avatarUrl
        });
      },

2.1适用的方法

home.xsml

<view>当前用户头像:
  <image src="{{path}}" style="height: 200rpx;width: 200rpx;"/>
</view>
<button open-type="getUserInfo" bindgetuserinfo="eg">授权登录button</button>

 home.js

 /*方法二 授权登录 */
  eg:function(){
    var that=this;
    wx.getUserInfo({
      success:function(res){
        //调用成功后触发
        console.log('sucess',res);
        that.setData({
          name:res.userInfo.nickName,
          path:res.userInfo.avatarUrl
        })
      },
      fail:function(res){
        console.log('fail',res)
      }
    })
  },

注意事项：

• 想要获取用户信息，必须经过用户授权（button）
• 已授权
• 未授权 wx.openSetting()

 2.3获取定位

home.xsml

<view bind:tap="getLocalPath">{{localPath}}</view>

home.js

 注意前面的data加上localPath

 //获取用户位置信息
  getLocalPath:function(){
    var that=this;
    wx.chooseLocation({
      success:function(res){
        console.log(res);
        that.setData({
          localPath:res.address
        });
      },
      fail:function(res){
        console.log(res);
      }
    })
  },

• 问题

出现errMsg: "chooseLocation:fail the api need to be declared in…e requiredPrivateInfos field in app.json/ext.json"

在app.json增加

  "requiredPrivateInfos": [
    "getLocation",
    "chooseLocation"
  ],