微信小程序的开发实践

微信小程序已出来有一段时间了，很多人不陌生，之前和同事一起做了一个马上金融小程序，在此分享下学习和开发过程中遇到的一些问题。

学习小程序首先就是系统的读一到两次官方文档，然后按官方给的开发工具，去搭建项目，下面主要介绍下微信小程序的组件、人脸识别以及发布提交审核。

一、组件介绍

（一）如何编写一个自定义组件

每个自定义组件由四个代码文件组成：json 文件：用于放置一些最基本的组件配置。wxml 文件：组件模版。wxss 文件：组件的样式，只在组件内部节点上生效（这个文件是可选的）。js 文件：组件的js代码，承载组件的主要逻辑。这四个文件与编写一个页面时用到的四个文件非常类似，但也有区别。下面将介绍如何利用这四个文件编写一个简单的自定义组件。

（二）组件配置

编写一个自定义组件，首先应在小程序代码目录中合适的位置创建一个 json 文件。这里我们把文件放置在小程序的 components 目录下，名为 custom-checkbox.json 。

这个文件中包含以下内容：

{"component":true}

（三）组件模板

在同一目录下，创建一个模版文件 custom-checkbox.wxml 。这个文件的写法与页面模版很类似：

{}

这个模版将在组件中渲染出一个 checkbox 和一个 label 。

（四）组件样式

同样类似于页面， wxss 文件中可以指定组件节点的样式。其中的样式仅在组件内部生效。需要注意的是，样式只能通过类选择器（如 .the-class-name ）来指定：

/* components/custom-checkbox.wxss */

.label {color: blue;}

（五）组件定义

组件的js文件中必须包含组件定义。定义时使用 Component 构造器：

// components/custom-checkbox.js

Component({

properties: {

title: {

type: String

}

},

data: {},

methods: {

labeltap: function() {

console.log("label被点击了一下！")

}

}

})

简单的 Component 构造器调用包含3个定义段： methods 中的方法可以用来包含组件的事件回调函数； data 是组件的内部数据，可以用 this.setData 方法来改变； properties 中声明这个组件的属性，上例中声明了 title 属性，这样，组件外部在使用组件时就可以指定这个属性的值。这样我们就编写好了 custom-checkbox 这个组件。

（六）如何使用自定义组件

1、在需要使用这个组件的页面所对应的 json 文件中，添加下面的自定义组件声明：

2、在页面对应的 wxml 文件中使用了：

二、 微信小程序的人脸识别

实现此功能的过程中会遇到比较多的坑，比如iphone6手机不支持人脸识别，获取第三方小程序传回我们小程序的人脸识别结果，以及小程序与小程序的跳转方式。

先说下第三方小程序跳回我们的小程序如何获取结果：

需要在全局app.js文件中onshow(options)方法里获取，

var code = options.referrerInfo.extraData.code;

通过判断code是否==0 来判断人脸识别结果；

如果code == 0 那么代表人脸识别成功，然后跳转到指定页面；

如果code！== 0 那么代表失败，然后跳转到指定页面；

此处还需要注意，当做过人脸识别的手机，获取过结果的，当按手机启动屏幕键和关闭屏幕键的时候也会调用此app.js里面的该方法，

导致页面会自动跳转到对应的跳转结果页面，解决此问题的方式是，在做人脸识别之前加个标识，在全局globalData中存入[‘isFace’]==’O’，

然后在app.js中加一下这样的代码即可解决此问题。

this.globalData['isFace'] === 'O' &&options.referrerInfo&&options.referrerInfo.extraData。

下面再说下小程序和小程序间的跳转方式,

根据微信基础库版本的不同，跳转方式也不一样

之前的老版本微信小程序跳转到人脸小程序，用传统的跳转方式即可：如下

wx.navigateToMiniProgram({

envVersion: 'release',

appId:,

path:'pages/pre',

extraData,

success: (res) => {

console.log('2222', res);

}

})

基础库高版本的跳转方式需要采用标签跳转；

基础库的版本高低判断，需要调用微信获取设备信息的方法进行判断。

三、微信小程序的提交审核和发布流程

在开发者工具里点击上传代码，会自动提交到微信管理后台，然后再点击提交审核即可,当审核通过时，部署的按钮会提示。

最后特别提示下，在微信小程序的管理后台当设置过小程序秘钥之后，是不能再次查看的，有个别人会把重置按钮理解成点击进去能查看，此时如果有线上的项目，会直接导致线上业务挂掉。当第一次生成秘钥的时候，自己就要在一个文档里面纪录保存下来，方便以后查看。

关于小程序的开发与分享暂时就介绍这么多，欢迎交流和指正。