微信小程序初探笔记(1)

1.微信小程序内的跳转
wx.navigateTo()和wx.redirectTo()的区别：

wx.navigateTo()是保留当前页面，跳转到某个页面，跳转页面后可以返回上一页。

wx.redirectTo()是关闭当前页面，跳转到某个页面，跳转页面后不能返回上一页。

---

2.跳转之间传值
以wx.navigateTo为例：

wx.navigateTo传入的url是跳转的页面（使用相对路径）

wx.navigateTo({
    url:"pages/home/home"
});

那么参数传递至下一页面，则只需要在路径后面，添加？问号，？后面接的是参数，以key－value的方式。

这里传了个value为2的参数

wx.navigateTo({
    url:"pages/home/home?type=2"
});

然后在home.js中的onLoad()函数中得到值：option.type就可以得到了，如下：

onLoad: function (option) {
    this.setData({
        type:option.type,
    });
    console.log(option.type);
}

---

3.tabBar设置

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index", 
      "text": "index",
      "iconPath": "images/111.png",
      "selectedIconPath": "images/222.png"
    },
    {
      "pagePath": "pages/hao/hao",
      "text": "hao",
      "iconPath": "images/111.png",
      "selectedIconPath": "images/222.png"
    }]
  }

• pagePath： 对应的页面绝对路径
• text：显示的文字
• iconPath：默认显示的icon
• selectedIconPath: 选中显示的icon

---

4.js文件模块化对外暴露

1.如果是全局的就设置到App{}里面
2.定制common.js文件对外暴露

common.js对外暴露变量和方法

module.exports = {
  formatTime: formatTime,
  IsChinese: IsChinese
}

调用者只需要

const app = getApp()
const util = require('../../utils/util.js')

---

5.数据绑定
小程序中的类分为wxml、js、json、wxss

• wxml view 视图类
• js 逻辑操作类
• json 静态配置类
• wxss 配合视图类的，用于组装view属性

wxml中的view组件可以跟js中的变量或者属性绑定起来
{{}} 双大括号；绑定的变量直接在js文件中data设置

---

6.列表wx:if渲染
wxml:

<!--pages/hao/hao.wxml-->
<text>my test</text>
<button bindtap='btnClick'>按钮</button>

<!-- wx:if -->
<block wx:if="{{show==true}}">
  <block wx:for="{{arr}}">
    <view class="bg_blue">{{item}}</view>
  </block>
</block>

<block wx:elif="{{show==false}}">
  <view class="bg_red">无内容</view>
</block>

js:

 /**
   * 页面的初始数据
   */
  data: {
      show: true,
      arr:[1,2,3]
  },
  
btnClick: function() {
      var bol = this.data.show;
      this.setData({
        show: !bol
      })
  }

wxss:

/* pages/hao/hao.wxss */
.bg_blue {
  height: 200rpx;
  background: blue
}
.bg_red {
  height: 100rpx;
  background: red
}