欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

值得记录的(四)- 小程序开发中遇到的一些要点

程序员文章站 2022-07-09 20:55:38
最近在做商城小程序的会员中心模块项目。之前除了制作过简单的翻译小程序之外几乎没有做过小程序开发,开发的过程也是一个学习的过程,记录一些在开发工程中值得记录的。 getUserInfo 调整 调用前需要 用户授权 scope.userInfo。 这个 API 在进行修改之后,只能够通过用户点击来触发, ......

最近在做商城小程序的会员中心模块项目。之前除了制作过简单的翻译小程序之外几乎没有做过小程序开发,开发的过程也是一个学习的过程,记录一些在开发工程中值得记录的。

getuserinfo 调整

调用前需要  scope.userinfo。

这个 api 在进行修改之后,只能够通过用户点击来触发,因此在一个普通元素(view或者 image)上进行 bindtap 事件绑定是不可以调用 userinfo的。至少截止到这篇文章发表之时,凡是接口需要获取 userinfo 必须用 button 来触发获取,只有做成一个 button 让用户点击,才能够获取到 userinfo。格式为:

<button class="go_to_member" bindgetuserinfo='gomember' open-type="getuserinfo">
  <view class="go_cart_member">
      会员信息
  </view>
</button>

 

wx.login

如果接口的请求需要传递 code 。那么 request 请求(ajax)要在 wx.login 中嵌套进行。

wx.login({
  success (res) {
    if (res.code) {
      //发起网络请求
      wx.request({
        url: 'https://test.com/onlogin',
        data: {
          code: res.code  // 后端需要的值
        }
      })
    } else {
      console.log('登录失败!' + res.errmsg)
    }
  }
})

 

token 传值

app.js 存放 token 为空,获取到 token 之后存储到全局 globaldata 中。然后在跳转到下一个页面,下一个页面请求接口的 url 地址会加上这个 token 字段

// app.js 全局data
globaldata: {
  userinfo: null,
  domain_name: 'https://xxx.com', // 线上
  token: '',
},



当前页跳转,并存储 app.globaldata.token

 
值得记录的(四)- 小程序开发中遇到的一些要点

<>
下一页接口请求地址带上 app.globaldata.token 。

 
值得记录的(四)- 小程序开发中遇到的一些要点

 

showloading

由于一些页面模块之间的跳转并不是单纯的本地 page 跳转,为了让用户没有使用卡顿的直接感觉,另一方面解除用户的等待焦虑心理,使用 showloading 告知用户正在加载。

 
值得记录的(四)- 小程序开发中遇到的一些要点

 

// 开始调用 showloading
wx.showloading({
  title: '加载中...',
})

// 请求结束后 用 complete 调用 hideloading
wx.request({
  url: ...,
  ...,
  success: (res) => {
  },
  fail: () => {},
  complete: () => {
    wx.hideloading()
  }
})

 

例子

 
值得记录的(四)- 小程序开发中遇到的一些要点

 

loadinggif 解决页面抖动

如果前后页面是使用 navigator 标签跳转,进页面之后再使用 onload 进行请求渲染的情况。可能会造成用户进入页面时,发生页面突然刷新或者页面渲染抖动的情况出现。这里我们可以搭配 wx:if 和 loadinggif 来实现一个顶部的 loading 旋转图标,在加载完成,返回 code === 0 的时候才给用户看再一次性渲染成功的页面,消除抖动感。当然这里如果更加节约资源,可以使用 iconfont 或者 svg 搭配 @keyframe css 动画去代替 loadinggif

 
值得记录的(四)- 小程序开发中遇到的一些要点
<view class="waiting_img" wx:if="{{ code !== 0 }}">
  <image src="/pages/img/waiting.gif"></image>
</view>

<view class="wrapper" wx:if="{{ code === 0 }}">
  页面内容
</view>
// app.wxss
.waiting_img {
    width: 100%;
    text-align: center;
}

.waiting_img image {
    width: 31px !important;
    height: 31px !important;
    margin-top: 30rpx;
}

 

小程序生命周期 this 搭桥

在 onload 生命周期钩子里面进行获取数据并渲染出现了 cannot read property 'setdata' of null 的报错。

 
值得记录的(四)- 小程序开发中遇到的一些要点
 
值得记录的(四)- 小程序开发中遇到的一些要点

该报错是由于小程序生命周期钩子中 this 改变指向导致的,var that = this 之后将 that 用于 setdata() 即可。

 
值得记录的(四)- 小程序开发中遇到的一些要点