美文网首页微信小程序开发
2020年微信小程序开发中遇到的一些坑

2020年微信小程序开发中遇到的一些坑

作者: pekdi | 来源:发表于2020-03-23 23:19 被阅读0次

1,快速建立小程序文件夹文件(js/json/wxml/wxss)

一开始在编辑器上右键,一个一个建这4个文件;

后来,选择在硬盘打开,直接拷贝其他文件夹,然后改名;

直到某天网上无意发现一篇文章,原来你可以在app.json中使用一行代码添加4个文件。

如图:只要在app.json的pages里面添加一行新的路径,开发者工具就会自动创建该路径以及配套的4个文件(js里还贴心准备各种事件响应代码)

就是这么神奇!对我这种新手来说,太方便了!

PS:当时网上发现的那篇文章地址 http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1656

2,小程序页面不能分享

打开小程序,发现点右上角的功能键(3个点)后,底部提示“当前页面不可转发”。

我一度以为是小程序首页(index)不支持分享转发,直到不小心在js里添加了下面这行事件代码:

/** * 用户点击右上角分享 */

onShareAppMessage: function () {

}

原来js里是要有分享事件才能出现转发!我自己之前各种改代码,js里没了分享事件,所以页面就不能分享转发了。

PS:这个事件里还可以设置转发的页面名称、图片、URL参数等。

3,设置小程序顶部选项卡(TAB)

很多微信小程序顶部都是好几个选项卡,可以点击切换,这个实现起来也很容易。

在app.json中,直接添加下面这行代码即可。

"tabBar": {

    "color": "black",

    "borderStyle": "white",

    "selectedColor": "rgb(176,170,168)",

    "backgroundColor": "white",

    "list": [

      {

        "pagePath": "pages/index/index",

        "text": "底部TAB1",

        "iconPath": "images/tabBar/tab1_unsel.png",

        "selectedIconPath": "images/tabBar/tab1_sel.png"

      },

      {

        "pagePath": "pages/usercenter/usercenter",

        "text": "底部TAB2",

        "iconPath": "images/tabBar/tab2_unsel.png",

        "selectedIconPath": "images/tabBar/tab2_sel.png"

      }

    ]

  },

可以很方便设置底部选项卡的颜色、边框、ICON图标(选择前&选择后)、名称、跳转路径(需要在pages集合中已添加的路径)等。

4,为什么代码里一些地方要用that.setData({})而不是this.setData({})

首先that是需要提前定义的一个变量名,你也可以叫别的。

this在一些地方,代表的含义是不同的,举例如下:

/**

  * 生命周期函数--监听页面加载

  */

  onLoad: function (options) {

    let that = this;

    wx.request({

      url: "https://你的后端域名/api/get_xxx",

      header: {

        "Content-Type": "application/json"

      },

      success: function (res) {

        //this.setData({})  此时不能用this设置整个page页面的data值,因为此时this的上下文作用域是里层事件,不再是page页。

        that.setData({

          num1: res.code //随便的一个页面data定义

        });

      }

    });

},

也就是说,主要是因为作用域的变化,在里层事件里,this已不能获取整个page的data信息,所以才在外层事件的开始给起个别名,以便后面调用设置page页面的data数据等。

5,在js里获取wxml页面textarea控件的输入值

比如说下面的textarea,绑定了一个input输入事件,方法名字叫searche_txt,

<textarea bindinput='search_txt' focus='{{true}}' value="{{from_content}}" placeholder="输入文字" style="height: 7.3em" />

在js代码中,增加这个方法:

search_txt: function (res) {

    this.setData({

      search_content: res.detail.value,

    })

  },

这样就能实现在page页面的data中一直更新存储页面输入框的值,在和接口交互时,可以直接使用page页面的data值,不用再考虑前端控件输入值的取得。

放上示例小程序供参考。

工具类小程序示例

TODO 暂时先写到这里,会陆续添加。

相关文章

网友评论

    本文标题:2020年微信小程序开发中遇到的一些坑

    本文链接:https://www.haomeiwen.com/subject/nuggyhtx.html