小程序如何从0-1（第二章）

上一章节讲到了如何新建一个小程序，以及页面内需要使用到的一些基本方法。这一章节就讲【小程序的自定义组件开发】以及【webview配置】问题

1.首先了解下什么是自定义组件

我们可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护，一份代码多个地方都可以使用。

image.png

这个弹窗是我写的一个自定义组件。最近不是小程序官方把wx.getUserInfo方法给抛弃了嘛？我们使用自定义组件弹窗可以在需要使用登录态的地方一次调用，不用写重复代码。

2.然后呢 我们看看这个是怎么做出来的，以及需要使用到的组件间的通信。

自定义组件跟普通页面一样由 wxml，wxss，js，json组成。组件模版与组件数据结合后生成的节点树，将被插入到组件的引用位置上。
在组件模板中可以提供一个 <slot> 节点，用于承载组件引用时提供的子节点。
json文件中定义该文件为自定义组件

{
  "component": true
}

wxml内这样写 使用wx:if控制该自定义组件是否显隐藏

<view class="container" wx:if="{{isShow}}" catchtouchmove="preventTouchMove">
</view>

js中这样来：使用Component构造器时可以指定组件的属性、数据、方法等。

【properties】：自定义组件的对外属性，是属性名到属性设置的映射表，属性设置中可包含三个字段， type 表示属性类型（可以是String，Boolean，Array）、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数。

【data】: 组件的内部数据，和 properties 一同用于组件的模版渲染。

【methods】: 组件的方法，包括事件响应函数和任意的自定义方法

Component({
  properties: {
    //属性值可以在组件使用时指定
    isShow: {
      type: Boolean,
      value: false
    }
  },
  data: {},  //数据可以在组件使用时定义
  methods: { //页面方法
    preventTouchMove() {},
    closeModel() {
      this.setData({
        isShow: false
      })
    }
  }
})

当然组件也是有生命周期的：

created：在组件实例进入页面节点树时执行，注意此时不能调用 setData
attached：在组件实例进入页面节点树时执行
ready：在组件布局完成后执行，此时可以获取节点信息（使用 SelectorQuery）
moved：在组件实例被移动到节点树另一个位置时执行
detached：在组件实例被从页面节点树移除时执行

还有一个behaviors。这个属性在我看来是最有用的（场景：我从外部页面进入一个自定义组件内，此时自定义组件需要触发某个方法，自定义组件的生命周期我都试过了，最后还是这个属性解决了）behaviors是用于组件间代码共享的特性。如果需要详细问问题的可以邮件minchangyong@qtshe.com

image.png

简单的说了下自定义组件内部构成。
然后呢 我们页面已经会写了，接下来我们需要写交互啦～

组件间通信与事件

组件间的基本通信方式有一下几种。

• WXML 数据绑定：用于父组件向子组件的指定属性设置数据， 在2.0.9基础库后可以接收Function了，前面我只列了Boolean，String和Array。
• 事件：用于子组件向父组件传递数据，可以传递任意数据。
• 如果以上两种方式不足以满足需要，父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。

首先我们看下子组件内定义好了方法，如何操作后让父组件也跟着进行相应的操作呢？
使用triggerEvent暴露个方法
自定义组件内：

image.png
image.png
我传给父组件一个betting

父组件内：使用bind: 子组件内的triggerEvent内的方法名，如图的skipVoteBet，父组件就是bind:skipVoteBet="父组件的方法名"

image.png
通过event 可拿到子组件内传递过来的参数：
image.png
这样子组件就能调用父组件的方法啦～

其实我们可以封装很多好玩的组件，比如loading啊 toast提示。swiper等。

我把我们的小程序首页全部抽离成组件了。

image.png

个人比较满意的是这块，使用了官方的swiper组件进行了二次封装（如果需要这种效果的可以询问我具体实现思路等）这里的知识点挺多的，切换时数据不够怎么做适配等。

好了，自定义组件暂时讲到这里，有问题的可以私信或者下方评论，下面开始说webview吧。

webview是小程序内容纳网页的容器：

我们如果要在小程序内打开网页，需要使用到<web-view>组件，这个组件限制问题挺多的（个人小程序不支持这个组件）。
首先 我们如果想在小程序内打开一个网页，需要先去小程序后台>设置里有个业务域名设置。这个域名设置需要网服务器根目录下塞一个校验文件（检验文件在设置域名时下载），校验通过后可删除掉该校验文件。
这个限制就比较多了。我们现在只能打开自己的网页，毕竟在别人的服务器下塞校验文件是不可能的，除非有合作。比如我想在我们的小程序内访问百度首页，抱歉，跳转不了，这个限制反正是很坑的。如果做的h5页面内要是有iframe链接的别的域名，只要被小程序检测到了，那么这个网页是整个都加载不了的。这里就网上找了张图片看下

image.png

毕竟是在别人的容器下生活，还是得遵循他的规则，好了，废话不多说先看下怎么在小程序内插入网页。
当然很简单：
新开一个路由：

image.png

页面构成：

image.png

只需要写个<web-view>组件即可，src链接我们的外部h5链接。整个wxml页面只有一个web-view组件，其他组件会被覆盖的。

js构成：

image.png

我这样写还取了options.scene是因为可以使用h5的网页生成小程序码，扫码打开是小程序内的h5页面。
⚠️页面链接一定要编码
⚠️分享的时候链接一定要写path
⚠️链接长度一定要短 （现在我们有个问题就是长链接生成不了小程序码）scene长度只有32位，实测发现超过64位都可以生成小程序码

具体的效果可以查看下青团社兼职实习小程序首页轮播图，这些轮播图都是使用活动配置平台制作，页面链接较长
效果图：

image.png

webview和h5之间的交互：
h5中如何传值给webview？这个直接地址栏带参数就可以了。
判断当前环境是在小程序内，在h5内跳转回小程序：
在h5网页中引入微信jssdk
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

// javascript
wx.miniProgram.navigateTo({url: '/pages/index/index'}) //跳转小程序内的页面
wx.miniProgram.postMessage({ data: 'foo' }) //往webview的页面内发起通知
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) // true }) //判断当前环境是否在小程序内

具体业务场景可以从轮播图进去 然后随便点h5的兼职按钮然后会跳转回小程序的兼职详情页，该方法已封装到活动配置平台（给运营开发的内部工具）

常见问题：
业务域名填写的https 但是小程序内打开提示http不是业务域名或者，这种问题基本上都是链接重定向了。
webview打开空白 点击返回出现正常页面，这种问题是由于证书不支持导致的
webview中不支持嵌套小游戏
webview支持网页传值吗？这肯定是可以的。

最后发大家一个开发指南

这篇文章简单的介绍了自定义组件以及webview的配置，如果有问题欢迎下方评论或者私信。

具体应用场景可以在微信搜一搜 搜索兼职 然后通过服务直达区找到 《青团社兼职实习》，有什么问题或意见欢迎指出。下一章节将会讲小程序生成海报图片适配各种机型的。先上张图： image.png

青团社招聘：

招聘岗位：高级前端开发工程师P5及以上
坐标杭州市余杭区文一西路1380号金之源大厦11层

简历投递到：hr@qtshe.com || haochen@qtshe.com

职位描述：

1、建设工具、提炼组件、抽象框架，促进前端工程化、服务化，持续提升研发效率，保障线上产品质量

2、构建H5/PC应用基础设施，主导建设前端各种发布/监控等平台，指导落实解决方案

3、持续优化前端页面性能，维护前端代码规范，钻研各种前沿技术和创新交互，增强用户体验、开拓前端能力边界