抱歉，您的浏览器无法访问本站

本页面需要浏览器支持（启用）JavaScript


了解详情 >

Hello world!

主页

分类

标签

归档

【集训】微信小程序(二)

发布于：2021年7月22日
微信小程序

字数：1.5k字

时长：7分钟
次浏览

API

系统信息

Object wx.getSystemInfoSync() | 微信开放文档 (qq.com)

1
2
3
4
5
6
7
// 获取系统信息
wx.getSystemInfo({
  success: (result) => {
    console.log(result);
    console.log(result.model);
  },
})

交互

wx.showToast(Object object) | 微信开放文档 (qq.com)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// loading提示框
wx.showLoading({
  title: '数据加载中',
})
setTimeout(res => {
  wx.hideLoading({
    success: (res) => {
      console.log("加载完成");
    },
  })
}, 2000)

// 消息提示
wx.showToast({
  title: '提示信息',
})

路由

跳转页面

wx.navigateTo(Object object) | 微信开放文档 (qq.com)

1
<button type="primary" bindtap="clickBtn">跳转到demo01</button>
1
2
3
4
5
6
7
8
9
clickBtn() {
	// 可带参数,调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会
    wx.navigateTo({
      url: '/pages/demo05/demo05?id=111',
      success: (res) => {
          console.log(res);
      }
    })
  }

返回页面

wx.navigateBack(Object object) | 微信开放文档 (qq.com)

1
<button bindtap="clickBack" type="primary">返回上一页</button>
1
2
3
4
5
clickBack() {
   wx.navigateBack({
     delta: 1,
   })
 }

事件传值

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

demo04.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
clickBtn() {
    // 可带参数,调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会
    wx.navigateTo({
      url: '/pages/demo05/demo05?id=111',
      events: {
        // 为指定事件添加一个监听器
        myBackData(data) {
          console.log(data);
        }
      },
      // 成功的回调函数
      success: (res) => {
        // 触发一个事件
        res.eventChannel.emit("myGetData", { data: "传递的数据" })
      }
    })
  }

demo05.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
onLoad() {
  // 获取所有打开的EventChannel事件
  const eventChannel = this.getOpenerEventChannel();
  // 监听index页面的myGetData事件
  eventChannel.on("myGetData", (res) => {
    // 被触发后的操作
    console.log(res);
  });
  eventChannel.emit("myBackData", { data: "返回的数据" })
},

clickBack() {
  //const eventChannel = this.getOpenerEventChannel();
  //eventChannel.emit("myBackData", { data: "返回的数据" })
  
  // 通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
  wx.navigateBack({
    delta: 1,
  })
}

网络

临时数据

demo06.wxml

1
2
3
4
5
6
7
8
9
10
11
12
<!--pages/demo06/demo06.wxml-->
<view class="out">
  <view class="row" wx:for="{{dataList}}" wx:key="*this">
    <view class="pic">
      <image src="{{item.url}}" />
    </view>
    <view class="text">
      <view class="title">{{item.title}}</view>
      <view class="time">{{item.time}}</view>
    </view>
  </view>
</view>

demo06.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
data: {
  dataList: [
    {
      title: "标题1",
      time: "2020-01-01",
      url: "/images/image1.png"
    },
    {
      title: "标题2",
      time: "2020-01-02",
      url: "/images/image1.png"
    },
    {
      title: "标题3",
      time: "2020-01-03",
      url: "/images/image1.png"
    }
  ]
},

请求数据

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

使用wx.request获取数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
onLoad: function (options) {
  wx.request({
    // 接口地址
    url: 'http://edu.newsight.cn/wxList.php',
    // 请求的参数
    data: {
      num: 5,
      page: 1
    },
    // 接口调用成功的回调函数
    success: (res) => {
      console.log(res);
      console.log(res.data);
        // 设置数据
      this.setData({
        reqData: res.data
      })
    },
  })
},

修改之前的代码

demo06.wxml

1
2
3
4
5
6
7
8
9
10
11
12
<!--pages/demo06/demo06.wxml-->
<view class="out">
  <view class="row" wx:for="{{reqData}}" wx:key="id">
    <view class="pic">
      <image src="{{item.picurl}}" />
    </view>
    <view class="text">
      <view class="title">{{item.title}}</view>
      <view class="time">{{item.posttime}} - {{item.author}}</view>
    </view>
  </view>
</view>

如果域名检验不合法，可以在微信公众平台的开发中管理添加所需要使用的域名，或者开发者工具在设置不检测合法。

事件绑定刷新数据

demo06.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// pages/demo06/demo06.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    reqData: [],
    scrollTop: 0
  },

  reqParam: {
    page: 1
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getReqData(1);
  },

  // 下一页
  clickToNextPage() {
    this.reqParam.page++;
    this.getReqData(this.reqParam.page)
  },

  getReqData(page) {
    wx.request({
      // 接口地址
      url: 'http://edu.newsight.cn/wxList.php',
      // 请求的参数
      data: {
        num: 4,
        page: page
      },
      // 接口调用成功的回调函数
      success: (res) => {
        console.log(res);
        console.log(res.data);
        // 设置数据
        this.setData({
          reqData: res.data
        })
      },
    })
  }

})

demo06.wxml

1
<button bindtap="clickToNextPage" type="primary">下一页</button>

用户信息

wx.getUserProfile(Object object) | 微信开放文档 (qq.com)

demo07.wxml

1
2
3
<button bindtap="login" type="primary">授权登录</button>
<view>{{nickName}}</view>
<image src="{{avatar}}"></image>

demo07.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
data: {
  nickName: "",
  avatar: "",
},

// 授权登录
login() {
  wx.getUserProfile({
    // 声明获取用户个人信息后的用途，不超过30个字符
    desc: '声明获取用户信息后的用途',
    success: (res) => {
      console.log(res);
      this.setData({
          nickName: res.userInfo.nickName,
          avatar: res.userInfo.avatarUrl
        })
    },
    fail: (res) => {
      console.log(res);
    }
  })
}

缓存

wx.setStorageSync(string key, any data) | 微信开放文档 (qq.com)

存

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
login() {
  wx.getUserProfile({
    // 声明获取用户个人信息后的用途，不超过30个字符
    desc: '声明获取用户信息后的用途',
    success: (res) => {
      console.log(res);
      this.setData({
        nickName: res.userInfo.nickName,
        avatar: res.userInfo.avatarUrl
      });
      // 存信息
      wx.setStorageSync('userInfo', res.userInfo);
    },
    fail: (res) => {
      console.log(res);
    }
  })
}

取

1
2
3
<button bindtap="login" type="primary" wx:if="{{!nickName}}">授权登录</button>
<view>{{nickName}}</view>
<image src="{{avatar}}"></image>
1
2
3
4
5
6
7
8
9
onLoad: function (options) {
  // 取缓存
  let userInfo = wx.getStorageSync('userInfo');
  console.log(userInfo);
  this.setData({
    nickName: userInfo.nickName,
    avatar: userInfo.avatarUrl
  })
},

模块化

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

public.js

1
2
3
4
5
6
7
8
9
10
11
12
var myPublic = {

  fun1() {
    console.log("执行fun1");
  },

  fun2(p) {
    console.log("执行fun2,参数：" + p);
  }

}
module.exports = myPublic

demo08.js

1
2
3
4
5
6
const myPublic = require('../../utils/public.js')

onLoad: function (options) {
  myPublic.fun1();
  myPublic.fun2("param");
},

小程序上线

更新于：2021年7月23日

学习

集训

微信小程序

评论




🧡💛💚💙💜🖤🤍