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

2017-01-11 本文已影响5330人 Ke_Wang

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

最坑，文件修改之后要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 无效的。。。

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

猜你喜欢

热点阅读