微信小程序开发新手注意点

作者: Ke_Wang | 来源:发表于2017-01-11 15:15 被阅读5330次

    自己犯过的一些错误,和遇到的坑记录下面来,再找找其他人的坑。。。。其实很多都是小细节,再看看文档,发现有些东西文档上都有的。。。但是文档不能操之过急。。。总不能背下来。。。目前还不完整,正不断补充中,有需要的道友请收藏关注!


    • 最坑,文件修改之后要command+s 保存后才能看到效果。。。。并且如果两个文件都改了的话两个地方都记得要保存,不然还是没效果的。我给button绑定动态标题的,数据的保存了,但是wxml 忘了保存,死活不出来,。。。
    • navigateTo代表跳转到logs页面后,index页面并不销毁,在logs页面下面,通过logs页面左上角的返回按钮可以返回到index页面,而如果是wx.redirectTo,则index页面销毁,无法从logs页面返回到index页面。
    • 页面跳转时候跳参数
    wx.navigateTo({    
      url: "../logs/logs?id=1&title=标题abc" 
       })
      即:从index页面跳转到logs页面过程中,传递两个参数:id=1和title=标题abc
    

    ps:页面跳转也可以在.wxml中配置,如图5中所示代码,文章1对应的text组件可以通过如下代码配置跳转: <navigator url="../logs/logs?id=100&title=标题" >

    • wx.request发起的是 HTTPS 请求。
      一个微信小程序,同时只能有5个网络请求连接。(同时只能有五层页面),多了就是大程序了。。。
    • 微信小程序没有提供系统级别的缓存清理机制,wx.clearStorge只是清理小程序这部分缓存。。。如果低端机上兼容想加上清理缓存,可以自己加上一个按钮清除缓存,然后调用 wx.clearStorge方法就行啦!
    • 类似iOS页面传值那种 逆传。在iOS上有block 代理等方法,小程序没有啊,小程序上顺传用navigateTo()中url携带参数的方式,但是逆传是不行的,找到大神的两个方法
      方法1:使用全局数据存储
      将要传递的数据,存储在App对象上(比如globalData属性)。
      将要传递的数据,存储在小程序的本地数据缓存(Storage)中。
      例如,我们在将要退出页面B的时候,作如下调用:
      //=== 1. 存储到app对象上的方式 ========
      var app = getApp()app.globalData.mydata = {a:1, b:2};
      //存储数据到app对象上wx.navigateBack();
      //返回上一个页面
      //=== 2.存储到数据缓存的方式 =========
    wx.setStorage({ 
                  key: "mydata",
                 data: {
                        a:1, 
                        b:2
                      },
                 success: function () {
                 wx.navigateBack();
               //返回上一个页面
                 }})
    

    这样一来,当返回到上一个页面的时候,可以通过读取这些全局存储区域,来获取到我们需要的数据。
    不过,这种方式也是有很明显的缺点的。由于是全局数据存储,所以当你存入了那些数据后,必须谨慎的去管理这些全局数据(何时被销毁),否则一不小心,就会产生副作用。
    方法2:从页面路由栈中直接获取和操作目标Page对象
    这种方式,是通过调用小程序的API: getCurrentPages(),来获取当前页面路由栈的信息,这个路由栈中按照页面的路由顺序存放着相应的Page对象,我们可以很容易的获取到上一级页面的完整Page对象,从而使直接调用Page对象的属性和方法成为可能。
    如下所示:
    var pages = getCurrentPages();var currPage = pages[pages.length - 1]; //当前页面var prevPage = pages[pages.length - 2]; //上一个页面//直接调用上一个页面的setData()方法,把数据存到上一个页面中去prevPage.setData({ mydata: {a:1, b:2}})
    比起全局数据存储的方式,这种方式在逻辑上要清晰得多,也不存在对数据的销毁有额外的管理工作。

    • 更新完开发者工具,链接不上的问题。
      菜单栏-动作-设置-选择第一项,不设置代理-保存!
      代理设置应该是一个隐藏比较深的坑,但是很多人被坑过,假如你的机器设置了代理,开发者工具可能会也跟着默认带来代理,然后会接踵而来很多登陆,空白等问题;

    暂时就这几个 以后更新


    01.12更新:

    • 关键字要放在{{ }}内,在布尔类型的时候,
      true:boolean 类型的 true,代表真值。
      false: boolean 类型的 false,代表假值。
      <checkbox checked="{{false}}"> </checkbox>
      注意:不要直接写 checked="false",其计算结果是一个字符串,转成 boolean 类型后永远代表真值。。。
    • 小程序的request 仅支持 HTTPS的,但是http这个暂时还没有普及多少(话说拼死搞好了iOS的,结果给个延期。。。),所以本地的开发环境测试的时候,还是需要用到http的,支持http需要 左侧-项目-开发环境不校验请求域名与TLS, 这样就可以了。。。
    本地调试http
    • 相信不少道友都在看极客学院的视频,那个视频出的比较早,包括IDE跟新版的都不太一样,这个需要注意下,已经踩了一次坑了,发现不一样的看下最新文档上的。。。

    • 如果突然发现开发工具上打不进去字了,中英文都不行,不要着急,重启一下吧,可能是由于不稳定造成的,(Mac常见)

    • 使用模板的时候报了这个错误:


      模板

      那是因为在include导入引用模板的时候忘了写后面的反斜杠。。。加上就好。。。犯了两次了

    <include src="../templates/header" />
    
    • 同样的在使用模板时候出来的错误。就是在导入模板的时候两种方式,官方文档上有介绍include 和import的区别
      在使用import的时候要注意写清楚使用的是哪个模板, 用is 属性。。

    • import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。
      如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template.

    • include可以将目标文件除了<template/>的整个代码引入,相当于是拷贝到include位置。

    • 是不觉得官方的开发工具自定义程度比较低(Mac版,windows的没看),比如说换个主题啊什么的,想要个黑色的找不到在哪,。。。其实是有的。。无意间发现的。在调试-右上角有个省略图标那个地方-点一下-有setting。。就是这里了




      这里就是设置了,根据自己喜好来就好了。。。(不过这个版本好像不稳定,我设置了下黑色,直接看不到左边面板了。。。重启才行。。。)



    1月13日

    • 明明配置了tabbar却不显示。。。


    我发现是路径写错了。。。
    改成酱紫就行了。。。



    1月16号

    • 使用navigator来跳转页面的时候, 后面要跟页面url,跟src 无效的。。。

    相关文章

      网友评论

      • 5785f289c61e:帮我解决的问题
        var pages = getCurrentPages();
        这个东西啥时候用 啥时候定义,千万别setData();
      • 知晓程序:你好!我们是爱范儿旗下专注于小程序生态的公众号知晓程序(微信号 zxcx0101)。我们很赞赏你的文章,希望能获得转载授权。授权后,你的文章将会在知晓程序社区(minapp.com)、爱范儿、AppSo 等渠道发布,我们会注明来源和作者姓名。

        非常感谢~~~
      • mathec:感谢作者帮我解决了一个问题,很关键
        Ke_Wang:@mathec 有用就好:joy: :joy:

      本文标题:微信小程序开发新手注意点

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