当 vue 遇上 小程序 （2）

2.1、切换与冒泡

  显示隐藏：Vue.js，用 v-show；小程序反着来，用hidden；两者都可以 if: v-if || wx:if ；
  冒泡控制：Vue.js，用  @click.stop ，小程序，用 catchtap；

  取消默认事件：vue.js 用 prevent，小程序不支持跳转外链
    <a href.prevent="http://www.baidu.com">百度</a>

· Vue.js

<template>
  <div @click="hideTxt">
      <div @click.stop="toggleTxt">切换</div>
      <div v-show="toggleSwitch">切换内容</div>
      <!--同样可以：<div v-if="toggleSwitch">切换内容</div> -->
  </div>
</template>
<script>
    export default {        
        data(){
            return{
                toggleSwitch:true
            }
        },
        methods:{   
            hideTxt(){
              this.toggleSwitch = false;
            },
            toggleTxt(){
              this.toggleSwitch = !this.toggleSwitch
            }
      }
    }
</script>

· 小程序

<!-- A.wxml -->
<view>
  <view bindtap="hideTxt">
    <view catchtap="toggleTxt">切换</view>
    <text hidden="{{!toggleSwitch}}">切换内容</text>    
    <!--  <text wx:if="{{toggleSwitch}}">切换内容</text>  -->
  </view>
</view>
 
 
<!-- A.js -->
Page({
  data: {  
    toggleSwitch:true
  },
  hideTxt(){
    this.setData({
      toggleSwitch:false
    })
  },
  toggleTxt(){
    this.setData({
      toggleSwitch: !this.data.toggleSwitch
    })
  }
})

2.2、跨页传值

· Vue.js

有五种方法，可参考我的文章： https://blog.csdn.net/sinat_36539161/article/details/81205353

· 小程序

有三种方法

第一种，通过设置和获取 app.js 取全局变量：

<!--A.wxml-->
<view>
      <text>{{globalVal.name}}</text>
</view>
 
<!--A.js-->
Page({
  onLoad: function () {
    this.setData({
      globalVal: app.globalData.globalVal
    })
  } 
})
 
<!--app.js-->
App({
  globalData: {   
    globalVal:{name:"marc",age:16} 
  }
})

第二种，通过设置和获取 Storage 

<!--A.wxml-->
<view>
      <text>{{date}}</text>
</view>
 
<!--A.js-->
Page({  
  onLoad: function () {
    var d = new Date(),
        week = "日一二三四五六"; 
    
    wx.setStorage({
      key: "date",
      data: d.getMonth() + 1 + "月" + d.getDate() + "日,星期" + week.charAt(d.getDay())
    }); 
 
    var _this = this;
    wx.getStorage({
      key: 'date',
      success: function(res) {       
        _this.setData({
          date: res.data
        });        
      },
    })
  } 
})

第三种，通过页面跳转的标签，来传参数

<!-- A.wxml -->
<view>
    <view wx:for="{{city}}" wx:key="index">
      <navigator url="../demo/demo?city={{item}}">{{item}}</navigator>
    </view>	  
</view>
 
<!-- A.js -->
Page({
  data: {  
    city: ["北京", "上海", "广州", "香港"],    
  } 
});
 
<!-- demo.js -->
// pages/demo/demo.js
Page({
  onLoad: function (options) {
    console.log(options.city);
  },
})
 

2.3、选项卡

· Vue.js

<template>
  <div>   
     <div><span v-for="(item,index) in city" :key="index" @click="tab(index)" :class="{on:index === tabIndex}">{{item}}</span></div>
      <div><div v-for="(item,index) in specialty" :key="index" v-if="index === tabIndex">{{item}}</div></div>
  </div>
</template>
<script>
    export default {        
        data(){
            return{
                city: ["北京", "上海", "广州", "香港"],     
                specialty:["烤鸭","吴侬软语","早茶","电影"],
                tabIndex:0,
            }
        },
        methods:{   
            tab(index){
              this.tabIndex = index;
            }
        }
    }
</script>

· 小程序

<!-- A.wxml -->
<view>
  <view>   
    <text wx:for="{{city}}" wx:key="index" data-index="{{index}}" bindtap="tab" class="{{tabIndex === index && 'on'}}">{{item}}</text>
  </view>
  <view>
    <text wx:if="{{tabIndex === index }}" wx:for="{{specialty}}" wx:key="index">{{item}}</text>
  </view>
</view>
 
 
<!-- A.js -->
Page({
  data: {  
    city: ["北京", "上海", "广州", "香港"],    
    specialty:["烤鸭","吴侬软语","早茶","电影"],
    tabIndex: 0
  },
  tab(e){
    this.setData({
      tabIndex:e.currentTarget.dataset.index
  })
})

2.4、路由

    Vue.js 的路由分三步：首先建一个单独的路由文件，然后在 main.js 引用该文件，最后在页面按需调用
    小程序，则相对简单，只需 在app.json 上定义好就行了 

· Vue.js

<!-- App.vue -->
<template>
  <div id="app">    
     <div class="nav">      
        <router-link :to="{path:'/'}">首页</router-link> 
        <router-link :to="{path:'/List'}">分类</router-link>   
        <router-link :to="{path:'/About'}">关于</router-link>   
    </div>      
    <div class="main">      
      <transition><keep-alive><router-view></router-view></keep-alive></transition>
    </div>   
  </div>
</template>


<!-- router > index.js -->
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import index from '../components/Index'

const router = new VueRouter({
	routes: [{
		path: "/index",
		component: index,
		alias: "/"
	}, {
		path: "/list",
		component: resolve => require(['../components/List'], resolve)
	}, {
		path: '/about',
		component: resolve => require(['../components/About'], resolve)
	}]
})

export default router

<!-- main.js -->
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

new Vue({
	el: '#app',
	router,
	store,
	render: h => h(App)
})

· 小程序

<!-- app.json -->
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",    
    "pages/list/list",
    "pages/about/about"
  ],
  "window": {
    "backgroundTextStyle": "mall",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#363636",
    "selectedColor": "#ee5e7b",
    "borderStyle": "#fff",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "img/sy.png",
        "selectedIconPath": "img/syOn.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/list/list",
        "iconPath": "img/sg.png",
        "selectedIconPath": "img/sgOn.png",
        "text": "列表"
      },
      {
        "pagePath": "pages/about/about",
        "iconPath": "img/mine.png",
        "selectedIconPath": "/img/mineOn.png",
        "text": "关于"
      }
    ]
  }
}

 

未完。。。