xvision-wechat-min v1.0.5

xvision-wechat-min

xVision小程序集成手册

使用

1. 使用微信开发者工具打开小程序项目，打开终端命令行工具，引入 xvision-wechat-min：

npm install xvision-wechat-min

2. 开发者工具左上角 =》点击“工具” =》点击“构建npm”

构建成功后，默认会在包根目录下生成 miniprogram_npm 目录， npm包源代码会被构建并生成到 miniprogram_npm/xvision-wechat-min 目录下。

3. 找到需要引用组件的页面，配置json文件，定义组件名，如下：

index.json

{
  "usingComponents": {
    "xvision-wechat":"xvision-wechat-min/xvision"
  }
}

4. 在需要引用组件页面的wxml文件中引入定义好的组件名，如下： 注：由于组件底层用的是 web-view 容器，会自动铺满整个小程序页面，不受父级大小样式的限制，所以引入组件时，直接引入或者是包一层父级元素引入都可以，都会不影响组件铺满整个小程序页面。

index.wxml

<xvision-wechat productId="{{productId}}" enableAnimation="{{enableAnimation}}"></xvision-wechat>

productId：产品id，目前Alpha内测只有一个可用id, productId=101，对应联想某款笔记本电脑。 enableAnimation: 是否显示按钮, enableAnimation=true 显示按钮, enableAnimation=false 隐藏按钮。

5. 在需要引用组件页面的js文件中定义组件的属性值：

index.js

Page({
  data: {
    productId: '101'，   // 目前Alpha内测只有一个可用id, productId=101，对应联想某款笔记本电脑
    enableAnimation: false  // enableAnimation=true 显示按钮，enableAnimation=false 隐藏按钮
  }
})

6. 以上工作都完成且没有报错的情况下，保存所有更改，即可在模拟器中看到页面效果。 （如果更改完保存后页面没变化，点击开发者工具上面的“编译”按钮）