关于微信自定义组件的使用过程以及第三方常用组件的使用过程!

关于微信自定义组件的使用过程以及第三方常用组件的使用过程!

首选:
我们来介绍一下在进行微信小程序开发的过程中能够用到的自我感觉良好的第三方组件:
第一:vant-Weapp这个组件库;其是youzan旗下的一个组件库;
网址为:https://youzan.github.io/vant-weapp/#/quickstart;
第二:lodash这个组件库;
网址为:https://www.lodashjs.com/
具体使用过程我们可以详见其官网相应的教程;但是在进行小程序开发过程中我们注意
直接上图:
关于微信自定义组件的使用过程以及第三方常用组件的使用过程!_第1张图片
此时;我们点击上方的详情;然后会弹出如上图的复选框;我们勾上使用npm模块以及不校验合法域名,web-view。。。。;
因为这些组件是我们拿取其他组织封装好的;因此我们需要安装和引入;当我们采取npm进行安装的时候;就需要勾选上去,不然将会报错;
做完这一步后;我们进行下一步;
安装我们要用到的组件库就是vant-Weapp和lodash;
通过npm i vant-weapp -S --production安装这个组件库;但是我们好应该注意就是我们在安装这个组件库之前还需要初始化一下生成package.json这个文件;(这个文件里面包含了项目的配置信息,包括名称、版本、许可证等元数据,也会记录所需的各种模块,包括 执行依赖,和开发依赖,)
通过npm init -y来初始化这个文件;
安装完第三方组件库后我们就要进行下一步;
即:如下图:
在这里插入图片描述
点击“工具“这个按钮会弹出一系列后续操作,我们点击这个操作命令;即构建npm;将会自动生成我们安装好的第三方组件库;此时第三方组件库的相应操作和注意事项已经结束;下面让我们来介绍自定义组件的如何创建以及使用过程;

自定义组件的使用操作步骤:
首选:我们可以参照微信小程序官网:
网址如下:
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
你们可以参照官网的使用步骤来进行使用;
下面这是我看过官网后整理的使用步骤;
首选第一步;
我们选创建一个文件夹名为:components;然后再右击这个文件夹会出来新建什么什么;我们选择新建component;然后取一个名字例如取名为h;那么他就会自动为我们生成.js文件,.json文件,.wxml文件,.wxss文件;
第一:我们打开.json文件;输入

{
  "component": true,
  "usingComponents": {}
}

第二:进入.wxml文件;
填充我们自定义组件的内容;
在这里我填充的内容为:


  {{innerText}}


第三:进入.wxss文件书写我们想要的样式;

.inner {
  color: red;
}

第四:进入.js文件进行属性值的绑定;(提供组件的属性定义、内部数据和自定义方法)

Component({
  properties: {
    // 这里定义了innerText属性,属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod() {}
  }
})

此时我们已经把我们创建的自定义组件弄好了接下来就是调用我们这个自定义组件;
那么如何调用我们的自定义组件呢?
第一:
在我们要使用自定义组件的页面打开.json文件;进行声明引入;

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

第二步:使用我们这个自定义组件把他放在我们想要放入的相应位置;


  
  

就此结束;

你可能感兴趣的:(微信小程序)