微信小程序学习第六天

这是我参与8月更文挑战的第10天，活动详情查看：更文挑战

自定义组件

自定义组件，指的是由开发者自己定义的组件，而不是微信定义的组件。

定义组件

定义组件第一步：新建一个文件夹专门用来盛放所有的自定义组件。文件夹名称随意。

第二步：在该文件夹上右击鼠标 会弹出一个新建列表

点击列表中的新建Components

此时，会让用户输入一个名称，该名称就是组件名称。

输入名称点击确定，出现了四个文件

这四个文件就是页面所需的四个文件。

modal.js：

页面的js文件中，是调用了Page函数，该函数用于注册页面。

这里的modal中调用的是Component函数。用于注册组件

modal.wxss：用于定义组件的样式

modal.wxml: 用于定义组件的结构

modal.json: 用于定义组件的配置

使用自定义组件

第一步： 在要使用该组件的页面的json文件中，配置 usingComponets

{
   "usingComponents": {
    "custom": "/components/modal/modal"
  }
}
复制代码

usingComponents: 是一个对象

对象的key表示自定义组件在当前页面中使用的时候的名称

对象的value表示自定义组件的路径

第二步：使用自定义组件

在页面的wxml文件中，使用<custom></custom>

单个子组件

有些时候，我们想要在组件中，定义子组件。

比如一个组件，定义了表单内容。但是没有定义标题。此时我们可以通过slot组件“预留”一个地址。供使用该组件的用户自己放置子组件。

自定义组件内:

<form>
    <view>
        <slot></slot>
    </view>
    <view>
        <label>用户名</label><input type='text'></input>
    </view>
</form>
复制代码

此时，我们可以在页面内使用时在组件开始标签与闭合标签之间，写子组件：

<custom>
  <text>登录表单</text>
</custom>
复制代码

最终的渲染结果就是将<slot></slot>换成<text>登录表单</text>

多个子组件

假如，上面的表单中，我们不仅仅预留一个标题，还预留一个别的位置。

此时，依旧使用slot，但是需要进行配置。

第一步：在自定义组件的JS文件中，定义options

// components/modal.js
 Component({
 options: {
   "multipleSlots": true
 }
})
复制代码

第二步：在自定义组件的WXML文件中，定义多个slot，并且给定name属性

第三步：在使用自定义组件的页面中，填入多个子组件，并给每一个子组件slot属性

<custom>
  <text slot="a">注册表单</text>
  <text slot="b">12312321321</text>
</custom>
复制代码

自定义组件的属性、数据、方法

在自定义组件的JS文件中，有一个函数Component

它接收一个对象，该对象默认有三个属性。

properties: 定义本自定义组件的属性的对象

data: 定义本自定义组件的所需数据

methods: 定义本自定义组件所需的函数

自定义组件内部与外部的通信

Component所接收的对象，可以在任何一个函数中通过this得到。它拥有一个方法triggerEvent方法。它可以触发事件。

第一步：给自定义组件绑定自定义事件

<custom bindclose="close">
 <text slot="a">注册表单</text>
 <text slot="b">12312321321</text>
</custom>
复制代码

第二步：在页面中对应的JS文件中，定义close函数

第三步：在自定义组件的某个方法内，触发close方法

第四步：当触发hello时，就会向外传递你好，传递的数据在close函数的事件对象的detail上

其它API

getLocation  获取当前的位置信息

openLocation 打开一个位置

chooseLocation 选择一个位置

chooseImage 选择图片

uploadFile 上传文件

downLoadFile 下载文件

request 发送请求

etWeRunData 获取运动信息

requestPayment 微信支付

项目中使用的API

获取系统信息

微信提供了API用于获取手机系统的相关信息

wx.getSystemInfoSync()

返回值是一个对象：对象中包含 系统版本、手机型号、窗体宽高等信息。

获取微信中已经设置过的地址列表

wx.chooseAddress({
success: function(res) {
res就是你当前选择的地址的相关信息
}
});
复制代码

开放能力

这是一个button组件的使用方式:

通过给button组件设置open-type=”XXX”来获取对应的信息

demo:

<button open-type="getPhoneNumber" bindgetphonenumber='getphonenumber'>获取电话</button>
复制代码

getphonenumber:是对应的JS文件的事件函数 函数的参数中有一个对象。该对象就是手机号码所在的对象。

个人用户，无法使用。

WXS

该组件允许用户执行脚本

属性: module 用于定义模块名称

定义之后，就可以在wxs内部通过module.exports 向外暴露数据

还可以在{{}}中，通过定义的模块名称来调用方法

上线

第一步：设置APPID

第二步：开发

第三步：点击菜单栏中的工具选项 再在下拉菜单中选择上线选项

第四步： 输入版本号 输入项目备注

点击上传，此时就上传到微信服务器。此时可以去开发平台，登录账号，进入开发管理，进行相关设置，设置完毕之后。在开发版本中，找到你要上线的项目。点击提交审核。等待审核通过，又会出现在审核通过版本中，点击上线。