微信小程序的开发实践

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

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

一、组件介绍

(一)如何编写一个自定义组件

每个自定义组件由四个代码文件组成: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);

}

})

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

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

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

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

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

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

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20190123A13U2V00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券