微信小程序之间的跳转,双向绑定语法,vantweapp组件库toast组件使用

363 阅读2分钟

这是我参与11月更文挑战的第27天,活动详情查看:2021最后一次更文挑战

1. 微信小程序之间的跳转

想在微信小程序内通过绑定事件跳转到另外一个小程序,查看了微信开放文档( wx.navigateToMiniProgram) 按照官网的流程写完后发现报错:invalied appid(无效的appid),

此时需要你将要跳转到的小程序的appid添加到白名单中,官网的示例并没有说明这个

这是我的跳转小程序的代码

wx.navigateToMiniProgram({
      appId: 'wx38cd529850225d76',
      navigateToMiniProgramAppIdList : ["wx38cd529850225d76"],
      // path: 'pages/game_query/game_query',
      // extraData: {
      // foo: 'bar'
      // },
      // envVersion: 'develop',
      success(res) {
        console.log(res);
      },
      fail(res)
      {
      console.log(res);
      }
      })

1 .navigateToMiniProgramAppIdList属性就是白名单,值是数组,你要跳转到哪个小程序,就把那个小程序的appid添加到数组中

2. path:就是要跳转到小程序的哪个页面

3. extraData:需要传递给目标小程序的数据,目标小程序可在 App.onLaunch,App.onShow 中获取到这份数据。如果跳转的是小游戏,可以在 wx.onShow、wx.getLaunchOptionsSync 中可以获取到这份数据数据。

4. enVersion:要打开的小程序版本。仅在当前小程序为开发版或体验版时此参数有效。如果当前小程序是正式版,则打开的小程序必定是正式版。

2. 微信小程序vantweapp组件库toast组件使用

vantweapp官网对toast组件的使用说明并不详细,按照官网的用法,页面是不能调用成功的,下面是成功的方法

//1,json文件引入
"usingComponents": {
    "van-toast": "/miniprogram_npm/@vant/weapp/toast"
  },

//2,xx.wxml文件引入
<van-toast id="van-toast" />

//3,xx.js文件引入组件 
import Toast from '../../miniprogram_npm/@vant/weapp/toast/toast';

//4,使用组件 
onLoad: function (options) {
	Toast('我是提示文案,建议不超过十五字~');
},

3. 微信小程序双向绑定语法

在 WXML 中,普通的属性的绑定是单向的。例如:

<input value="{{value}}" />

如果使用 this.setData({ value: 'leaf' }) 来更新 value ,this.data.value 和输入框的中显示的值都会被更新为 leaf ;但如果用户修改了输入框里的值,却不会同时改变 this.data.value 。

如果需要在用户输入的同时改变 this.data.value ,需要借助简易双向绑定机制。此时,可以在对应项目之前加入 model: 前缀:

<input model:value="{{value}}" />

这样,如果输入框的值被改变了, this.data.value 也会同时改变。同时, WXML 中所有绑定了 value 的位置也会被一同更新, 数据监听器 也会被正常触发。

用于双向绑定的表达式有如下限制:

只能是一个单一字段的绑定,如一下都是无效的;

<input model:value="值为 {{value}}" />
<input model:value="{{ a + b }}" />

目前,尚不能 data 属性,如一下也是无效的

<input model:value="{{ a.b }}" />