微信小程序入门教程

对于从入门学微信小程序,可以看阮一峰的教程。

主要有4篇:

《微信小程序入门教程之一:初次上手》,链接:http://www.ruanyifeng.com/blog/2020/10/wechat-miniprogram-tutorial-part-one.html

《微信小程序入门教程之二:页面样式》,链接:http://www.ruanyifeng.com/blog/2020/10/wechat-miniprogram-tutorial-part-two.html

《微信小程序入门教程之三:脚本编程》,链接:http://www.ruanyifeng.com/blog/2020/10/wechat-miniprogram-tutorial-part-three.html

《微信小程序入门教程之四:API 使用》,链接:http://www.ruanyifeng.com/blog/2020/11/wechat-miniprogram-tutorial-part-four.html

 

写的非常详细,强烈推荐。

 

注意:在第4篇中,有几个问题,下面我来总结一下。

wx:for问题

wx:for需要有wx:key,否则Console会出现警告信息

[WXML Runtime warning] ./pages/index/index.wxml
 Now you can provide attr `wx:key` for a `wx:for` to improve performance.
  1 | <view>
> 2 |   <text class="title" wx:for="{{items}}">
    |    ^
  3 |     {{index}}、 {{item}}
  4 |    </text>
  5 | </view>

Now you can provide attr "wx:key" for a "wx:for" to improve performance 是一个关于性能优化方面的提示.

不处理不影响程序运行。

在wx:for后面添加wx:key="key" 可消除警告。

 

正确写法:

<view>
  <text class="title" wx:for="{{items}}" wx:key="index">
    {{index}}、 {{item}}
   </text>
</view>

 

const itemArr = [...this.data.items, newItem];

这段代码,很多人不懂,我也不懂。引用一下网友的评论:

这是js的语法,等号右边的中括号,表示要重新定义一个数组。中括号内,就放一个个的数组元素。 ...(三个点) 代表展开数组,可以简单理解为把this.data.items中的每个元素,复制到中括号里了,然后再新加了一个 newItem元素,最终的目的是把this.data.items追加一个新元素,再返回给itemArr。

 

获取用户信息授权弹框问题

按照文档中的代码操作,确定不会出现弹框。引用一下网友的评论:

新的微信开发工具做出了一些调整。后续的开发不再支持`getUserInfo`, 使用新的`getUserProfile`. 文档地址:

https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801?idescene=6

 

那么正确的代码如下:

home.wxml

<view>
  <text class="title"> Hello {{name}}</text>
  <button bindtap="getUserProfile">
    授权信息
  </button>
</view>

 

home.js

Page({
  data: {
    name: ''
  },
  getUserProfile(e) {
    wx.getUserProfile({
      desc: 'test feature',
      success: (res) => {
        this.setData({
          name: res.userInfo.nickName
        })
      },
      fail: (reason) => {
        console.log(reason.errMsg)
      }
    })
  }
});

授权确认弹窗会从页面底部弹起,UI也有小的变化。 但自己的尝试都是根据老师前面教程的逻辑来的, 先在home.js中声明好能在view中读取的变量,然后在view中绑定handler, 然后再回到home.js中定义对应的handler, 在这个过程中不断查阅官方doc. 学到很多,再次感谢。

 

效果如下:

微信小程序入门教程

 

 

允许之后,就可以得到微信昵称了。

微信小程序入门教程

 

上一篇:不知道的地方(2)


下一篇:阮一峰网络日志 第76-81期 (76期--81期)