小程序开发

微信小程序开发测试教程

编辑时间:2019-12-07 11:23  浏览次数:浏览次数
微信小程序就是Hybrid技术的应用。Hybrid App(混合模式移动应用)。小程序能够更多的可以更多的调用手机本身的功能(如位置信息,通讯录、摄像头等),这一点同app的差异越来越小。

小程序应用分析
简单介绍 小程序是一种微信开发不需要下载安装即可使用的应用。 实质微信小程序就是Hybrid(混合模式移动应用)技术的应用。小程序能够更多的可以更多的调用手机本身的功能(如位置信息,摄像头等)。

小程序注册
小程序开发框架的逻辑层是由JavaScript编写。 逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。小程序再次基础上做了一些修改方便开发: 增加App和Page方法,进行程序和页面的注册。 App()函数用来注册一个小程序。接受一个object 参数,其指定小程序的生命周期函数等。

小程序开发测试 Page()函数用来注册一个页面。接受一个object参数,其指定页面的初始数据、生命周期函数、事件处理函数等。生命周期函数为:onLoad:页面加载一个页面只会调用一次; onShow:页面显示,每次打开页面都会调用一次; onReady:页面初次渲染完成 一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互; onHide: 页面隐藏,当navigateTo或底部tab切换时调用;onUnload:页面卸载,当redirectTo或navigateBack的时候调用。

创建项目
现在是内测版本,所有的AppID全部都是腾讯内部发布的。但是,没有AppID也不影响测试开发,我们可以选择无AppID进行测试开发,只是不能在手机真机上面调试。 选择项目目录,再添加项目即可。

编写代码
点击开发者工具左侧导航的「编辑」,我们可以看到这个项目,已经初始化并包含了一些简单的代码文件。是app.js、app.json、app.wxss这三个。其中app.js是我们传统的js文件,app.json是项目配置文件,app.wxss是项目css文件,微信小程序会读取这些文件,并生成小程序实例。

app.json: app.json是对整个小程序的全局配置。其中有5个属性,官方给出的配置表为:

小程序开发测试 我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。 window是用于设置小程序的状态栏、导航条、标题、窗口背景色。

小程序开发测试 pages里面是程序的所有页面的目录,所有需要跳转的页面,都需要在pages里面配置好。 tabBar: tabBar是底部导航栏部分,tabBarAPI为(见下图)
小程序开发测试 tabBar配置好后,在任何页面下,都会有一个tab导航栏,其中list里面是配置tab里有多少个按钮,案例中为两个。list里面有多个属性(见下图)

小程序开发测试 案例APP的app.json为:
{ pages:[ pages/index/index, pages/logs/logs ], window:{ backgroundTextStyle:light, navigationBarBackgroundColor: green, navigationBarTitleText: APP, navigationBarTextStyle:white }, tabBar: { selectedColor:red, list: [{ pagePath: pages/index/index, text: 首页, iconPath:goods_mgold.png, selectedIconPath:goods_mgold.png }, { pagePath: pages/logs/logs, text: 天气查询, iconPath:icon_community.png, selectedIconPath:icon_community.png }] } } app.js: app.js是小程序的脚本代码。

我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用MINA 提供的丰富的 API。代码主要是写在APP对象里面作用于全局。 其中每个页面都可以有自己的js文件,例如index.js就是Index.wxml页面的js代码,其中js代码的一些应用主要是写在page对象里面。 事件的使用方式: 首先在wxml里面写入一个bindtap点击事件。 Click me! 然后再js的page对象中定义:
小程序开发测试 就可以实现一个点击事件。其中bind是绑定,type为tap。type是事件类型。

数据渲染:在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 可以在Page对象里面的data属性里面写入condition的值为true或者false判断是否渲染。

模板定义:可以在模板中定义代码片段,然后在不同的地方调用。 直接在外部新建一个box.wxml的模板:
小程序开发测试 然后建立一个外部commom.js模块。
小程序开发测试

通过module.exports导出模块,先在需要引入模块的wxml文件中直接include带上src地址,然后在需要引入模块的js文件中。

接口API:小程序开发框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。

本文地址:https://www.webbj.cn/operation/xcx1874.html

免责声明:我司网站转载此文,不代表本网的观点和立场。不以盈利为目的,如有侵犯公司或个人权益,请联系QQ:451521464沟通,我司会第一时间删除文章。 思捷智联是北京小程序开发公司,欢迎咨询免费获取思维导图!
推荐阅读
思捷智联

思捷智联是一家2009年成立于北京的IT外包公司,我们致力于为企业提供app软件开发和微信小程序开发服务。公司成立10年来,我们为民政部、方正电子、神州数码、联想控股、壹基金、首钢集团、北京大学、北京师范大学、今麦郎、丰汇租赁、万通控股等上百家企业提供了IT外包服务。我们努力实现每一位客户的托付,为客户创造实在的效益,让您与梦想走得更近。

微信咨询

扫描微信二维码
同市场经理沟通需求

感受专业服务,从来电咨询开始
136-6130-7020