微信小程序开发中各种跳转方式的区别

wx.navigateTo：

用于保留当前页面、跳转到应用内的某个页面，使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序，通常推荐使用 wx.navigateTo进行跳转，以便返回原页面，以提高加载速度。当页面特别多时，则不推荐使用。

wx.redirectTo：

当页面过多时，被保留页面会挤占微信分配给小程序的内存，或是达到微信所限制的 5 层页面栈。这时应该考虑选择 wx.redirectTo。wx.redirectTo()用于关闭当前页面，跳转到应用内的某个页面。这样的跳转，可以避免跳转前页面占据运行内存，但返回时页面需要重新加载，增加了返回页面的显示时间。

wx.reLaunch：

wx.reLaunch()与 wx.redirectTo()的用途基本相同，只是 wx.reLaunch()先关闭了内存中所有保留的页面，再跳转到目标页面。

wx.switchTab：

对于跳转到 tab bar 的页面，最好选择 wx.switchTab()，它会先关闭所有非 tab bar 的页面。其次，也可以选择 wx.reLaunch()，它也能实现从非 tab bar 跳转到 tab bar，或在 tab bar 间跳转，效果等同 wx.switchTab()。使用其他跳转 API 来跳转到 tab bar，则会跳转失败。

wx.navigateBack：

用于关闭当前页面，并返回上一页面或多级页面。开发者可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。这个 API 需要填写的参数只有 delta，表示要返回的页面数。若 delta 的取值大于现有可返回页面数时，则返回到用户进入小程序的第一个页面。当不填写 delta 的值时，就默认其为 1（注意，默认并非取 0），即返回上一页面。

小程序实战经验总结：
小程序image标签选择大图片的时候，图片会变形

原因是小程序的image标签会自带宽高 320 * 240

需要设置一下 mode = “widthFix” 就可以变成原图片的宽高了

文字需要换行\n 或者需要占位符 &nbsp时，必须要使用 text 标签否则无效。

要使用&nbsp &lt这一类的符号时需要在text标签内设置 decode =“{{ture}}”

小程序做嵌套循环时数据不方便放在data 里

解决方案：把需要循环的模块做成模板，模板里的data设置成变量。

在调用模板时调用时的data 里再把变量换成需要调用的数组或者字符串等。

微信小程序里是不支持 background 为图片的。

解决方法 : 直接使用 image 标签，src 设置成网络图片，如果需要做成背景，在image标签里加一个子标签，里面设置绝对定位就可以了。

<image>

<view> 这行设置相对于image 绝对定位，就可以实现背景图效果 </view>

</image>

设置全局变量属性

小程序里，变量一般是放在每个文件夹的js里的，有时候所有页面都用到某个数据时，一个个申明太麻烦，所以定义一个全局变量。

首先要在最外面的 app.js 里的 globalData 里把需要的数据放进去。

如： globalData: {

userInfo: null,

url: “http://m.yayuanzi.com/”,

}

再在你需要调用的页面的文件夹里的js文件中。

在第一行加上const app = getApp()；

然后定义一个变量，把数据放在这个变量里

如：

data: {

//获得官网地址

address: app.globalData.url,

}

最后这个address 就可以在页面里用了。

小程序列表渲染 wx :key 的问题

小程序列表渲染是使用 wx：for = “ {{ 循环的参数 }} ”

如果不加wx：key = “ 参数 ” 的话，调试工具中会出现黄色的警告信息。但不会影响页面。

网上找的原因：

wx:key 的值以两种形式提供

1、wx:key=”property” 其中property是代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。类似于字典的key值

2、wx:key=”*this”，保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组

件保持自身的状态，并且提高列表渲染时的效率。

不添加wx:key情况：

<block wx:for-items=”{{userInfoList}}” >，会出现warning： Now you can provide attr “wx:key” for a “wx:for” to improve performance. 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。