微信小程序中app.js文件、组件、api

app.js文件：

每个小程序都需要在app.js中调用 App 方法注册小程序实例.

 App({//App实例化，整个小程序只有一个App实例，全部页面共享onLaunch: function () {//onLaunch小程序启动之后触发  },onShow: function () {//onShow小程序启动，或从后台进入前台显示时触发 },onHide: function () {//onHide小程序从前台进入后台时触发 },onError: function () {//onError小程序发生脚本错误或 API 调用报错时触发 },onPageNotFound: function () {//onPageNotFound小程序要打开的页面不存在时触发 },onUnhandledRejection: function () {//onUnhandledRejection小程序有未处理的 Promise 拒绝时触发 },onThemeChange: function () {//onThemeChange系统切换主题时触发  },//可自定义天剑任意类型函数或变量，用this可访问，如:names:'jack'})

页面中的js文件：

对于小程序中的每个页面，都需要在页面对应的 js文件中使用page进行注册页面，指定页面的初始数据、生命周期回调、事件处理函数等。

 Page({//page为页面构造器，生成一个页面data: {//data定义初始化数据，会和wxml使用{{text}}渲染text: "hello"},options: {//options定义页面的组件选项},onLoad: function() {// 页面创建时执行},onShow: function() {// 页面出现在前台时执行},onReady: function() {// 页面首次渲染完毕时执行},onHide: function() {// 页面从前台变为后台时执行},onUnload: function() {// 页面销毁时执行},onPullDownRefresh: function() {// 触发下拉刷新时执行},onReachBottom: function() {// 页面触底时执行(上拉)},onShareAppMessage: function () {// 页面被用户分享时执行},onShareTimeline: function () {// 页面被用户分享到朋友圈时执行},onAddToFavorites: function () {// 页面被用户收藏时执行},onPageScroll: function() {// 页面滚动时执行},onResize: function() {// 页面尺寸变化时执行},onTabItemTap(item) {// tab 点击时执行console.log(item.index)console.log(item.pagePath)console.log(item.text)},// 事件响应函数（自定义函数名，如：viewTap）viewTap: function() {this.setData({//setData重新设置值text: 'word'}, function() {//重新赋值后执行的回调函数})},// 自由数据customData: {hi: 'MINA',lucky:'jack'}})

behaviors:

behaviors 可以用来让多个页面有相同的数据字段和方法,如：

  //behavior.js中：module.exports = Behavior({data: {sharedText: '页面共用字段'},methods: {sharedMethod: function() {//共用方法}}})// page.js中：var myBehavior = require('./behavior.js')Page({behaviors: [myBehavior],//使用behaviors接收数据onLoad: function() {console.log(this.data.sharedText)//通过this拿到数据}})

Component：

Component构造器可用于定义组件，调用 Component构造器时可以指定组件的属性、数据、方法等，文档推荐：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html，如：

 Component({behaviors: [],// 属性定义（详情参见下文）properties: {myProperty: { // 属性名type: String,value: ''},myProperty2: String // 简化的定义方式},data: {}, // 私有数据，可用于模板渲染lifetimes: {// 生命周期函数，可以为函数，或一个在methods段中定义的方法名attached: function () { },moved: function () { },detached: function () { },},// 生命周期函数，可以为函数，或一个在methods段中定义的方法名attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖ready: function() { },pageLifetimes: {// 组件所在页面的生命周期函数show: function () { },hide: function () { },resize: function () { },},methods: {onMyButtonTap: function(){this.setData({// 更新属性和数据的方法与更新页面数据的方法类似})},// 内部方法建议以下划线开头_myPrivateMethod: function(){// 这里将 data.A[0].B 设为 'myPrivateData'this.setData({'A[0].B': 'myPrivateData'})},_propertyChange: function(newVal, oldVal) {}}})

组件：

小程序提供了丰富的组件给开发者，开发者可以组合各种组件合成自己的小程序。就像 HTML的div, p 等标签一样，如：

<map longitude="深圳经度" latitude="深圳纬度" bindmarkertap="点击地图时触发的函数" style='width:200px;height:200px' class='mapbox'></map><!--map地图组件，呈现一个地图到页面上,可添加属性，如组件内-->

更多组件文档推荐：https://developers.weixin.qq.com/miniprogram/dev/component/

api:

为了让开发者可以方便的调起微信提供的能力，例如获取用户信息、微信支付等，小程序提供了很多 API 给开发者去使用,如获取地理信息：

 wx.getLocation({type: 'wgs84',success: (res) => {var latitude = res.latitude // 纬度var longitude = res.longitude // 经度}})

更多API推荐阅读：https://developers.weixin.qq.com/miniprogram/dev/api/

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海

微信小程序中app.js文件、组件、api相关推荐

微信小程序中app.js的使用
在项目开发中遇到一个需求,用户登录完成后,需要根据用户信息去发送另一个请求获取数据,当每次进入这个页面的时候都需要再次调用更新接口,所以在生命周期,页面显示的时候再次触发了这个方法,用户进入首页,会调 ...
微信小程序--在app.js 和其他页面中更改globalData的值
微信小程序--在app.js 和其他页面中更改globalData的值 app.js中修改其他页面 app.js中修改在app.js中,应当在小程序初始化完成以后再更改全局变量的值,即在onLau ...
微信小程序获取app.js中的公共数据
微信小程序获取app.js中的公共数据小程序项目结构如下 app.js App({list: [{id: 1,name: '完美型',content: "属于第一型的你,相信常常这感觉,对 ...
微信小程序中处理PDF文件
一直在尝试要在微信小程序中处理PDF文件,包括生成PDF文件和检测某个PDF文档的页数,但是微信小程序的接口不支持这个功能,只能是想办法在js文件中实现这个代码,这个代码的实现需要pdf-lib 这个 ...
微信小程序中的页面文件和组件
页面文件页面构造器 JS文件页面的JS文件,用于书写当前页面所需要的脚本代码以及生命周期函数. Page() : 注册了一个页面接收一个对象,该对象用于配置当前页面所需内容. 该对象拥有的属性: ...
style 对象微信小程序_微信小程序中一些JS常识
1.小程序中不支持HTTP请求,配置后台服务器域名只支持https(假设配置后,运行程序还是报域名配置问题,重启开发工具即可),图片地址可以用http. 2.支持请求网页,但是必须在微信公众平台小程序 ...
微信小程序开发之.js文件
1.注册小程序 App()函数用于注册一个小程序,参数为一个Object(可以把它理解成为一个类似于C++里的对象,在里面我们封装了一些基本的数据类型也就是我们所称的属性,还有一些方法,也就是我们所称 ...
微信小程序中使用Vant Weapp组件库
介绍 Vant 是一个轻量.可靠的移动端组件库,于 2017 年开源. 目前 Vant 官方提供了 Vue 2 版本.Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序 ...
微信小程序中使用Vant Weapp组件--以card为例
一.构建环境: Vant Weapp官网文档: https://youzan.github.io/vant-weapp/#/quickstart 1.方法一注意要在微信小程序根目录下安装:用cmd命令 ...

微信小程序中app.js文件、组件、api

微信小程序中app.js文件、组件、api相关推荐

最新文章

热门文章