小程序学习--1
来源:互联网 发布:水平垂直奇偶校验算法 编辑:程序博客网 时间:2024/06/05 15:13
小程序学习–1 开发工具、目录结构
简介
微信小程序就是一个类似 RN 的轮子,可以快速开发,有一定的适用场景,但是也有其局限性,
适合于 低频 但重要的需求
微信小程序提供了什么?
底层API 和 组件 微信小程序官方文档
开发工具的使用
点击下载官方小程序开发工具
安装后点击添加项目
选择无AppId(基本上不影响开发)
填写项目名称和项目目录,注:新建文件夹可以用来创建quick start 项目,直接引入已经开发过的文件夹,可以用来打开别的小程序项目
其他开发工具
个人感觉官方的小程序开发工具不太好用(用完之后还关不了),所以找了一下替代工具,
sublime text 3
和atom
虽然都有插件,但是用起来还是不顺手,最后找到了这个Egret Wing这个IDE提供了对微信小程序所有文件类型的支持,包括代码提示和语法高亮,也可以自定义主题,更关键的是可以,实时预览应用,但是不知道什么原因,在集成在IDE 的控制台中,没有输出调试信息,点击调试,会打开小程序的官方开发工具,然后就卡住了…,所以,本人会手动将Egret Wing 和小程序开发工具都开启,这样在IDE中修改后保存,在官方开发工具中会自动刷新。
目录结构简介
App 跟 Page 的关系是,App在整个小程序中只能有一个,但小程序中可以有多个页面,也就是多个Page,页面相关的文件都放在根目录下的pages目录,每个页面由四类文件组成,名字要相同,xxx.js / xxx.wxml / xxx.wxss / xxx.json
1.目录最外层的 app.js app.json app.wxss
1.app.js 应用的入口
2.app.json 针对微信小程序的全局配置,主要包含以下几个配置
- pages :页面路径的数组,表示小程序要加载的所有页面,其中数组的第一项代表小程序的初始页面
{ "pages":[ "pages/index/index" "pages/logs/logs" ]}
- window : 设置小程序的状态栏、导航条、标题、以及窗口背景颜色
{ "window":{ "navigationBarBackgroundColor": "#ffffff", // 导航栏背景颜色 "navigationBarTextStyle": "black", // 导航栏标题颜色,仅支持 black/white "navigationBarTitleText": "title", // 导航栏标题文字内容 "backgroundColor": "#eeeeee", // 窗口的背景色 "backgroundTextStyle": "light", // 下拉背景字体、loading 图的样式,仅支持 dark/light "enablePullDownRefresh": "false" // 是否开启下拉刷新 }}
- tabBar : 用于页面切换,适用于常规的Tab应用,可置于顶部或者底部,是一个数组只支持2-5个tab
{ "tabBar": { "color": "#fff", // tab 上的文字默认颜色 "selectedColor": "#fff", // 文字选中时的颜色 "backgroundColor": "#000", // tab 的背景色 "borderStyle": "white", // tabbar上边框的颜色, 仅支持 black/white "position": "bottom", // tabbar的位置,可选值 bottom、top "list": [{ "pagePath": "pages/index/index", // 页面路径,必须在 pages 中先定义 "text": "首页", // tab 上按钮文字 "iconPath": "img/a.png", // 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px "selectedIconPath": "img/b.png" // 选中时的图片路径 }, { "pagePath": "pages/logs/logs", "text": "日志", "iconPath": "img/a.png", "selectedIconPath": "img/b.png" }] },}
- networkTimeout : 配置小程序网络请求的超时时间
{ "networkTimeout": { "request" : 6000, // wx.request的超时时间,单位毫秒,默认为:60000 "connectSocket": 6000, // wx.connectSocket的超时时间,单位毫秒,默认为:60000 "uploadFile": 6000, // wx.uploadFile的超时时间,单位毫秒,默认为:60000 "downloadFile": 6000 // wx.downloadFile的超时时间,单位毫秒,默认为:60000 }}
- debug : 调试模式开关,开发时开启,发布时关闭
{ "debug": true}
3.app.wxss 全局样式文件
2.pages文件夹
pages文件夹下有很多其他文件夹,每个文件夹代表一个页面的内容,每个页面的内容包含以下文件
1.page.json 页面配置文件
每个页面可以单独配置 page.json 他会覆盖 app.json中的配置,只对当前页面生效
2.page.wxml 页面的布局文件,作用相当于 HTML 文件,但是标签不相同,xx.wxml 文件中的标签同时还代表组件
3.page.wxss 页面的样式文件,类似于 CSS 文件, 语法上基本一致 但是 有些选择器不能使用了
4.page.js 页面的功能、数据都写在这里边了,写法上类似
Vue.js
3. app.js 中的写法
App() 小程序的注册入口,全局唯一
// 注册微信小程序,全局只有一个let appConfig = { data: {}, // page页的数据 // 小程序生命周期的各个阶段 onLaunch : function () {}, onShow : function () {}, onHide : function () {}, onError : function () {}, // 自定义函数或者属性};App(appConfig);// 其他位置引用const app = getApp();
4. page.js
Page() 页面注册入口
写法上类似App()入口注册,用来注册一个页面,维护该页面的生命周期及数据
let pageConfig = { data : {}, // 页面生命周期的各个阶段 onLoad : function () {}, onShow : function () {}, onReady : function () {}, onHide : function () {}, onUnload : function () {}, onPullDownRefresh : function () {}, onReachBottom : function () {}, onShareAppMessage : function () {}, // 自定义函数或者属性};Page(pageConfig);// 获取页面堆栈,表示历史访问过的页面,最后一个元素为当前页面const page = getCurrentPages();
小程序的生命周期
1.前台和后台 : 小程序处于最顶层的时候是前台(也就是正在使用),当有其他任务时处于后台(也就是在接入电话等时候)
2.app 的生命周期
// app.jsApp({ onLaunch: function () { // app 启动 console.log('App onLaunch'); }, onShow: function () { // app 显示 console.log('App onShow'); }, onHide: function () { // app 到后台 console.log('App onHide'); }})
3.page 的生命周期
Page({ data:{ text:"Page login" }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数,装载页面 console.log('---index---onLoad---'); }, onReady:function(){ // 页面渲染完成 console.log('---index---onReady---'); }, onShow:function(){ // 页面显示 console.log('---index---onShow---'); }, onHide:function(){ // 页面隐藏 console.log('---index---onHide---'); }, onUnload:function(){ // 页面关闭,页面卸载 console.log('---index---onUnload---'); }, itemClick: function () { console.log('item is click'); // 跳转页面,上一个页面执行onHide,可以返回 wx.navigateTo({ url:"../logs/logs?id=1" // 向下一个页面传递数据 }) // 第二种跳转,上一个页面执行onUnload,不可以返回 // wx.redirectTo({ // url:"../logs/logs" // }) // 跳转到Tab页面 // wx.switchTab({ // url:"../logs/logs" // }) }})
页面跳转
1.wx.navigateTo({url:”“}) : 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面(最多能够打开五个页面)
2.wx.redirectTo({url:”“}) : 关闭当前页面,跳转到应用的某个页面
3.wx.switchTab() : 跳转到tabBar页面,并关闭其他所有非tabBar页面
4.wx.navigateback(delta:1) : 关闭当前页面,返回上一级或者多级页面,可以通过getCurrentPages()获取当前页面栈,决定要返回第几层
5.组件 navigator : 页面链接
wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面,只能用 wx.switchTab 跳转到 tabbar 页面
下一篇 视图层与组件
- 小程序学习--1
- 小程序学习日志1
- 小程序学习 1 结构框架&配置
- 小程序学习--2
- 小程序学习--3
- 小程序学习--4
- 小程序学习-环境
- 小程序学习随笔
- 小程序学习
- 小程序学习记录
- 学习小程序整理
- 小程序学习
- 小程序学习
- 小程序学习笔记
- ruby学习小程序整理
- java 小程序 自己学习
- 学习Python:WSGI_01_小程序
- 小程序学习(二)
- 第一次写博客
- 在Windows和Linux之间传送文件
- LabWindows/CVI之无驱摄像头使用--实例:远程监控(TCP)
- javascript中的==和===
- MVC3.0中直接在VS中浏览cshtml页面
- 小程序学习--1
- cpu topology
- SHA1 安全加密算法 (微信分享获取签名时使用)
- JDBC事务、JTA(Java Transaction API)事务、容器事务
- Linux命令基本格式及目录处理命令
- Glassfish部署cxfwebservice,axis调用报错的问题
- 读写分离
- Charles Petzold《Code》----2017.1.13 读12章
- (一)1.3Java程序运行机制及运行过程