浅析微信小程序

1、设置不同页面的标题

在每个wxml边上都有一个json配置项，在json里面设置{ "navigationBarTitleText": "购物车"}即可

2、页面跳转

 ***************这里WX.navigateTo() 跳转的页面在app.json中位置必须在当前页面之上，不然弄了半天都没反应,会报错表示在该页面找不到这个跳转事件

wx.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。

url  string  需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'

wx.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

url  string   需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 'path?key=value&key2=value2'

wx.switchTab(OBJECT)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

url  string  需要跳转的 tabBar 页面的路径（需在 app.json 的  tabBar  字段定义的页面），路径后不能带参数

wx.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。

delta  number 默认值为1 返回的页面数，如果 delta 大于现有页面数，则返回到首页。

设置tabbar

"tabBar": {
      "color":"#cbcbcb",
      "selectedColor": "#ff5b3f",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "image/home.png",
      "selectedIconPath": "image/home_hover.png" 
    },
    {
      "pagePath": "pages/mycart/mycart",
      "text": "购物车",
      "iconPath": "image/cart.png",
      "selectedIconPath": "image/cart_hover.png"
    },
    {
      "pagePath": "pages/mytb/mytb",
      "text": "我的淘宝",
      "iconPath": "image/mytb.png",
      "selectedIconPath": "image/mytb_hover.png"
    },
    {
      "pagePath": "pages/zujian/zujian",
      "text": "组件",
      "iconPath": "image/icon_component.png",
      "selectedIconPath": "image/icon_component_HL.png"
    },
    {
      "pagePath": "pages/opt/opt",
      "text": "接口",
      "iconPath": "image/icon_API.png",
      "selectedIconPath": "image/icon_API_HL.png"
    }]
  }

3、微信小程序表单组件 picker

Bxml:

<template name='place'>//这里name 和 下面引用页面的is相对应  

 <view class="section" style='width:100%'>
        <picker bindchange="bindcity" value="{{cityIndex}}" range="{{city}}">
            <view class="picker">//这里通过设置value 和range就对整个数组做了大概的遍历，但是没有显示出来 这些地方还可以设置e的其他属性可以供获取的比如id等
               {{city[cityIndex]}}
            </view>
        </picker>
    </view>

</template>

AXML：

<import src='../../templates/address-temp2'/>//data重新设置参数便于页面引用

<template is='place' data="{{provinceIndex:city.initprovinceIndex,cityIndex:city.initcityIndex,areaIndex:city.initareaIndex,province:city.province,city:city.city[city.selectprovince],area:city.area[city.selectcity]}}"/>

js:

var city = {
    province:['-请选择-','四川省'],
    city:{'-请选择-':['-请选择-'],'四川省':['成都市','资阳']},
    area:{'-请选择-':['-请选择-'],'成都市':['高新区','成华区','锦江区','武侯区'],'资阳':['雁江区','资中','安岳']},
    provinceIndex:0,
    cityIndex:0,
    areaIndex:0,
    selectprovince:'-请选择-',
    selectcity:'-请选择-',
    selectarea:'-请选择-',
}

    var bindcity = function(e){
        var city = that.data.city;
        that.setData({//通过e事件可以获取页面上的value等属性值，然后用于设置获取后面的属性值
             "city.cityIndex":e.detail.value,
             "city.selectcity": city.city[city.selectprovince][e.detail.value],
             "city.selectarea":city.area[city.city[city.selectprovince][e.detail.value]][0],
             "city.initareaIndex":0        
    })
    };

4、小程序页面引用

（1） <import src="a.wxml"> 作用域性不能跨域操作引用哪个就和哪个想关联

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

在 index.wxml 中引用了 item.wxml，就可以使用item模板：

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

（2）和java里面差不多就是少了点符号
include
include可以将目标文件除了<template/>的整个代码引入，相当于是拷贝到include位置，如：
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>