【微信小程序】微信小程序开发（一）

文件目录结构详情

后缀为wxss的为css样式表。后缀为wxml的为html文件，注意的是里面不是HTML标签了，手册里面提供了相应的标签，这些标签可以自动有一些效果。

最外面的app.js、app.json、app.wxss是全局脚本、全局样式或者全局配置项。
pages是用于页面文件夹，里面的文件夹一个就是一个页面，不需要引入一个css样式表啊或者脚本等等。
在pages的页面中，logs是日志，能记入一些操作的信息
只要在全局的app.json中配置页面的话，编辑器自动在pages的目录下生成页面目录及文件。
写公共的样式中，可以写入全局的app.wxss内。
全局的app.js只要App({})方法才可以调用页面的方法和属性。在页面的脚本中，是使用Page({})方法来调用

全局文件尝试

app.js

必须得使用APP({})方法来调用属性、方法和事件。只能写一个

//
App({// 代码块，注意能使用es6的就使用吧。
})

属性	类型	描述	触发时机
onLaunch	Function	生命周期函数–监听小程序初始化	当小程序初始化完成时，会触发 onLaunch（全局只触发一次）。默认参数接收的，可以看到加载页面的路径及scene场景值还有其他（从这里可以看出是有原型对象的。）
onShow	Function	生命周期函数–监听小程序显示	当小程序启动，或从后台进入前台显示，会触发 onShow
onHide	Function	生命周期函数–监听小程序隐藏	当小程序从前台进入后台，会触发 onHide
onError	Function	错误监听函数	当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
其他	Any	开发者可以添加任意的函数或数据到	Object 参数中，用 this 可以访问

根据上面onLaunch事件和onShow的接收参数，可以获取下面到东西

字段	类型	说明
path	String	打开小程序的路径
query	Object	打开小程序的query
scene	Number	打开小程序的场景值（可以看出是从什么地方打开小程序的）
shareTicket	String	shareTicket，详见获取更多转发信息
referrerInfo	Object	当场景为由另一个小程序打开时，返回此字段
referrerInfo.appId	String	来源小程序的 appId
referrerInfo.extraData	Object	来源小程序传过来的数据

onLaunch 初始化

当小程序初始化完成触发的事件，不要在 onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。

App({onLaunch:function (e) {console.log(e,'我已经初始化了');if(e.scene === 1011){console.log('您是扫二维码进入的');}else if (e.scene) {console.log('您是长按图片识别二维码');}else if (e.scene === 1013) {console.log(手机相册选取二维码);}else if (e.scene === 1029){console.log('卡券详情页');}}
});

onShow 小程序启动或进入前台

进入小程序触发一次，然后只要是如果是切换到手机的桌面的话，再次进入小程序触发一次。一个变量不能触发从新赋值

App({onShow:function () {let i = 0; // 只要是在这里定义的变量都是无法重新赋值。if (i == 0){console.log(i+1); // 这里更够运算i= 2+1; // 不能从新赋值}else {console.log(i); // 完全就是不走。}}
});

let j = 0; // 在这里申明变量的话，下面不管任何方法都是可以重新赋值。
App({onShow:function () {j++; // 可以重新赋值if (j == 1){console.log(j,'第一次小程序运行'); // 第一次小程序运行。}else {console.log(j,'你已经切换进入小程序了');}}
});

onHide 切换到手机桌面

App({onHide:function () {console.log('切换到手机桌面了');}
});

onError 错误的脚本或者调用api（不支持）就会触发。

App({onError:function () {console.log('程序出错');}
});

其他（自定义的一些属性方法）

全局app.json 配置

可以配选项卡、页面、设置入口页面、设置窗口的颜色、字、状态栏的颜色等等

{"pages": ["pages/index/index", // 创建index页面"pages/logs/index" // 创建logs页面],"window": {"navigationBarTitleText": "Demo", // 设置导航栏上面的标题。"navigationBarBackgroundColor": "#000", // 导航栏的颜色"navigationBarTextStyle" : "#fff",//导航栏标题颜色。"backgroundColor":"#ffffff",// 窗口的颜色（下面有图片，可以说明）"backgroundTextStyle":"light", // 下拉的图标及颜色，但是官方只提供两种，仅支持 dark/light"enablePullDownRefresh": "ture", // 开启下拉（必须得开启，才能在页面中使用onPullDownRefresh事件进行页面下拉刷新）。"onReachBottomDistance":"60" // 设置下拉刷新的距离。},// 创建选项卡，"tabBar": {"color": "#", // （必填）设置选项卡的颜色（只支持16位颜色值）。"selectedColor": "", // （必填）选项卡上的文字选中时的颜色（只支持16位颜色值）"backgroundColor": "", // （必填）选项卡的背景色（只支持16位颜色值）"position":"top", // 可选，两个值top和bottom。默认设置bottom在下面，如果设置为top，图标就会去掉。"borderStyle":"white", //可选，只有两个值black/white。将选项卡中的边框颜色更改为，提供两个值。"list": [{ // （必填）必须至少2个，最多5个，都不能超过。list数组内必须得有两个值。数组顺序排序。"pagePath": "pages/index/index", // 引入的页面"text": "首页", // 选项卡的名字"iconPath": "", // 设置icon图标的路径（icon不能40kb，建议尺寸81pxX81px），经过测试，不能请求网络图片，只能是本地。"selectedIconPath": "image/location_selected.png" // 选中当前的图标，经过测试，不能请求网络图片，只能是本地。}, {"pagePath": "pages/logs/logs", // 引入的页面"text": "日志"}]},// 设置各种网络请求的超时时间,下面的都是默认为：60000，都是可选参数"networkTimeout": {"request": 10000, // 设置wx.request请求的时间，单位毫秒。"downloadFile": 10000, // 设置wx.downloadFile的超时时间，单位毫秒。"connectSocket": 1000, // wx.connectSocket的超时时间，单位毫秒"uploadFile": 6000// wx.uploadFile的超时时间，单位毫秒，},"debug": true // 开启调试日志
}

[外链图片转存失败(img-FxAnllJX-1566294347853)(https://mp.weixin.qq.com/debug/wxadoc/dev/image/config.jpg?t=2017930)]

页面page.json配置

优先级，先找到页面的配置page.json，如果没有找到，然后在外面配置的app.json中。

比如,在index页面中，必须得是index.json。下面的颜色值，不能写出#000，必须写全#000000

{"navigationBarBackgroundColor":"#26c398", // 当前导航栏背景颜色(必须得16进制的颜色值)，----不能写出#000，必须写全---"navigationBarTextStyle":"#ffffff", // 当前导航栏标题颜色，仅支持 black/white"navigationBarTitleText" : '我是当前页面的标题' , // 当前页面导航栏标题文字"backgroundColor" : "#00ff00" , // 窗口的背景色"backgroundTextStyle": "light", // 当前下拉背景字体、loading 图的样式，仅支持 dark/light"enablePullDownRefresh": true, // 当前页面下拉开启（如果在全局的app.json中设置了，就可以不用设置，如果）。"disableScroll": false, // 默认false，如果是一个页面，不能让用户上下滚动，设置为 true 则页面整体不能上下滚动；只在 page.json 中有效，无法在 app.json 中设置该项"onReachBottomDistance" : 120 // 当前页面上拉触底事件触发时距页面底部距离，单位为px
}

【微信小程序】微信小程序开发（一）相关推荐

微信小程序开发系列一：微信小程序的申请和开发环境的搭建
我最近也刚刚开始微信小程序的开发,想把我自学的一些心得写出来分享给大家. 这是第一篇,从零开始学习微信小程序开发.主要是小程序的注册和开发环境的搭建. 首先我们要在下列网址申请一个属于自己的微信小程序 ...
python开发微信小程序-微信小程序开发：python+sanic 实现小程序登录注册
开发微信小程序时,接入小程序的授权登录可以快速实现用户注册登录的步骤,是快速建立用户体系的重要一步.这篇文章将介绍 python + sanic + 微信小程序实现用户快速注册登录全栈方案. 微信小程 ...
微信小程序购物商城系统开发系列-工具篇
微信小程序购物商城系统开发系列-工具篇微信小程序开放公测以来,一夜之间在各种技术社区中就火起来啦.对于它估计大家都不陌生了,对于它未来的价值就不再赘述,简单一句话:可以把小程序简单理解为一个新的操 ...
你能用微信小程序打开小程序了【附开发方法】
6月21日晚间,微信小程序再次迎来升级:小程序可以打开小程序了,同一个公众号下关联的10个同主体小程序和3个非同主体小程序之间,可以调用接口直接相互跳转.微信客户端6.5.9及以上版本支持.另外门店小 ...
微信小程序家庭记账本开发进度二
第三步是在开发设置李找到你的AppID,然后复制下来第四步是是完成小程序开发者绑定.开发信息配置后,首先下载开发者工具.参考开发文档进行小程序的开发和调试. 前往开发者工具下载页面 ,根据自己的操 ...
微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...
微信小程序--家庭记账本开发--01
微信小程序的开发准备与开发工具的学习在这次寒假伊始,临近春节,学习进程有所拉下,现在补上.寻找了好多网站的相关学习视频,包括微信公众平台关于小程序这方面也有好多相关资料供查阅. 1.开发准备: 首先 ...
微信小程序开发系列一：微信小程序的申请和开发环境的搭建 1
我最近也刚刚开始微信小程序的开发,想把我自学的一些心得写出来分享给大家. 这是第一篇,从零开始学习微信小程序开发.主要是小程序的注册和开发环境的搭建. 首先我们要在下列网址申请一个属于自己的微信小程序 ...
小程序获取头像试试水 02《程序员变现指南之微信QQ 小程序真的零基础开发宝典》
本系列教程是针对粉丝的变现教程,还不是粉丝的可以关注我并且到社区:https://bbs.csdn.net/topics/603436232 进行打卡,不是老粉的也可以获取最终的技术变现学习,最终还有 ...
小程序的 HelloWord 01《程序员变现指南之微信QQ 小程序真的零基础开发宝典》
本系列教程是针对粉丝的变现教程,还不是粉丝的可以关注我并且到社区:https://bbs.csdn.net/topics/603436232 进行打卡,不是老粉的也可以获取最终的技术变现学习,最终还有 ...

【微信小程序】微信小程序开发（一）

文件目录结构详情

全局文件尝试

app.js

必须得使用APP({})方法来调用属性、方法和事件。只能写一个

根据上面onLaunch事件和onShow的接收参数，可以获取下面到东西

onLaunch 初始化

onShow 小程序启动或进入前台

onHide 切换到手机桌面

onError 错误的脚本或者调用api（不支持）就会触发。

其他（自定义的一些属性方法）

全局app.json 配置

页面page.json配置

【微信小程序】微信小程序开发（一）相关推荐

最新文章

热门文章