微信小程序入门教程

深藏阁楼爱情的钟 2022-10-17 11:24 30阅读 0赞

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

主要有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-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-two.html]

《微信小程序入门教程之三：脚本编程》，链接：[http://www.ruanyifeng.com/blog/2020/10/wechat-miniprogram-tutorial-part-three.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][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][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. 学到很多，再次感谢。

效果如下：

![2ad84e5ae516bdebf04bf25b5eaecb85.png][]

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

![b49c8ac8368e7b088bfd2c27562829b3.png][]

[http_www.ruanyifeng.com_blog_2020_10_wechat-miniprogram-tutorial-part-one.html]: 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-two.html
[http_www.ruanyifeng.com_blog_2020_10_wechat-miniprogram-tutorial-part-three.html]: http://www.ruanyifeng.com/blog/2020/10/wechat-miniprogram-tutorial-part-three.html
[http_www.ruanyifeng.com_blog_2020_11_wechat-miniprogram-tutorial-part-four.html]: http://www.ruanyifeng.com/blog/2020/11/wechat-miniprogram-tutorial-part-four.html
[https_developers.weixin.qq.com_community_develop_doc_000cacfa20ce88df04cb468bc52801_idescene_6]: https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801?idescene=6
[2ad84e5ae516bdebf04bf25b5eaecb85.png]: /images/20221014/3485161f4d9244118d1067cb3af9b633.png
[b49c8ac8368e7b088bfd2c27562829b3.png]: /images/20221014/604b5e7dd0d74e5dbae6999ef7a85744.png