基本语法三

一、引入字体图标

1. 阿里iconfont添加需要图标到购物车并生成css链接

2. 打开css链接，修改后缀为 iconfont.wxss 并保存至小程序项目根目录

3. 在app.wxss中引入 @import './iconfont.wxss';

4. 使用

<text class="iconfont icon-ziyuan84"></text>

注意

新增/替换字体图标请注意全局是否有在使用，没有则直接覆盖即可。

二、获取用户信息

免授权展示

<open-data>组件

• 内置组件： 不需要用户授权，用起来方便。但不允许用户脚本读取<open-data>返回的信息。

<view>
	<!-- type属性指定所要展示的信息类型 -->
	<open-data type="userAvatarUrl"></open-data>
	<open-data type="userNickName"></open-data>
</view>

授权获取

用户点按主动获取

<view>
	<!-- open-type="getUserInfo" -->
	<button open-type="getUserInfo" bind:getuserinfo="buttonHandler">
		授权获取用户个人信息
	</button>
</view>

Page({
	data: {
		name: '',
	},
	buttonHandler(event) {
		// 必须声明open-type：getUserInfo
		if (!event.detail.userInfo) return
		this.setData({
			name: event.detail.userInfo.nickName,
		})
	},
})

注意

在生命周期内直接调用 wx.getUserInfo() 不会出现授权弹窗

判断用户是否已授权：wx.getSetting()

// 在onLoad中调用
wx.getSetting({
  success: {authSetting} => {
    let isAuth = authSetting.scope.userInfo // true or false
    if(isAuth) {
      wx.getUserInfo(() => {
        success: (data) => {
          console.log(data) // 打印用户信息
        }
      })
    } else {
      // 导航到授权页面
    }
  }
})

三、数据请求与云函数调用

• 推荐工具：json-server 一个 json 文件快速生成接口

wx.request 请求普通接口

注意

只有后台登记过的服务器域名，才可以进行通信。不过，开发者工具允许不校验合法域名。【合法域名为100%匹配，例如二级域名都是不允许的】

Page({
	data: {
		items: [],
	},
	onLoad() {
		const that = this
		wx.request({
			url: 'http://localhost:3000/items',
			success(res) {
				that.setData({ items: res.data })
			},
		})
	},
})

请求云函数

  onLoad: function (options) {
    console.log(this.data.test)
    wx.showLoading({ title: '请求中...', })
    wx.cloud.callFunction({
      name: 'rpanddb', // 云函数名称
      data: {
        p1: 'params-1' // params
      }
    }).then(({ result }) => {
      console.log(result)
      this.setData({
        actions: result.list.data
      })
    }).finally(() => {
      wx.hideLoading()
    })
  }