美文网首页微信小程序开发
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