An overview of the

I suddenly saw a new component library of iView appellate app “iView” on the Internet today. I have tried it myself and found that it works quite well. I would like to share with you the process OF using it.

Preview the iView component

1. You can scan the code on the phone to view this component, but we want to use which component is what kind of, we need to see this component on the phone is what kind of, in fact, this is quite troublesome, but I still put the TWO-DIMENSIONAL code to come over.



2. Check it in the web wechat developer tools, first go to Github download address: github.com/TalkingData… And then install the dependencies.

Install dependencies after downloading from GitHub
npm install

# build component
npm run dev
Copy the code

Finally, open the examples directory in wechat developer tools.

When I first opened it, it looked like this

Json file is not available in the game. Json file is not available in the game.json file, but it is not available in the examples directory.



Use iView component

First of all to understand before using WeChat custom components: developers.weixin.qq.com/miniprogram…

Also check out my previous article on wechat component packaging: juejin.cn/post/684490…

To get started, download the code for iView Syndrome on Github and copy the Dist directory to your own program. Then use components in the following way, using Button and Modal as an example, and other components are viewed in the corresponding document page:

1. Add required components. Configure in THE JSON of the page (the path is configured according to its project location) :

{  
"component": true."usingComponents": 
{    "i-button": ".. /.. /dist/button/index"."i-modal": ".. /.. /dist/modal/index"}}Copy the code

2. Use components in WXML

<view class="container">  
    <i-button type="primary" bind:click="handleClick"</i-button> </view> <view style= "box-sizing: border-box! Important"margin-top: 100px;">    
    <i-button bind:click="handleOpen1"> Normal dialog box </i-button> </view> <i-modal title="Title" visible="{{ visible1 }}" bind:ok="handleClose1" bind:cancel="handleClose1"</view> <view> Some text </view> <view> some text </view> <view> some text </view> </view> <view> Some text </view> <view> some text </view> <view> some text </view> </i-modal>Copy the code

3. Some interaction effects of components

Page({  
data: {    
    visible1: false,
  },
  handleOpen1() {
    this.setData({      
        visible1: true    
    });  
 },
 handleClose1() {
    this.setData({
      visible1: false}); }});Copy the code

After completing the above steps, let’s have a look at the results:



If you think the article is good and helpful, please share it with your friends and give a thumbs-up. The person who lights the red heart is the most beautiful. If you don’t know anything, please leave a comment below.