微信小程序开发-笔记

一、开发文件结构

1.根目录下有三个文件:app.js,app.json和app.wxss。一个小程序项目必须有的三个描述App的文件。这三个文件是应用程序级别的文件。这3个文件的意义:

表1.1  app.js,app.json和app.wxss文件的含义
文件 必填 作用
app.js 小程序逻辑文件
app.json 小程序配置文件
app.wxss 全局公共样式文件

2.和这三个应用程序级别文件平行的pages文件夹。一个小程序由若干个页面文件构成。每个页面由4个文件构成,分别是:.js,.json,.wxml和.wxss文件。这4个文件意义:

表1.2  .js,.wxml,.wxss和.json文件的含义
文件 必填 作用
.js 页面逻辑
.json 页面配置
.wxml 页面结构
.wxss 页面样式表

二、配置程序:

1.app.json文件是小程序最基本的全局配置文件,它决定页面文件的路径(路由)、窗口表现、设置网络超时时间、设置多Tab等。对于app.json的具体配置如下表:

表2.1 app.json配置项
属性 类型 必填 描述
pages String Array 设置页面路径
window Object 设置默认页面的窗口表现
tabBar Object 设置底部tab表现
networkTimeout Object 设置网络超时时间
debug Boolean 设置是否开启debug模式

1).pages:

pages接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成。每一项代表对应页面的(路径+文件名)信息,数组的第一项代表小程序的初始页面。例如:在app.json配置:

{
"pages":[
    "pages/index/index"
    "pages/logs/logs"
   ]
}

2).window

window属性用于设置小程序的状态栏、导航条、标题、窗口背景色、具体含义及配置如表2.2

表2.2  window属性及配置
属性 类型 默认值 描述
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色
navigationBarTextStyle String white 导航栏标题颜色,仅支持dark/white
navigationBarTitleText String 导航栏标题文字内容
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉背景字体、loading图的样式、仅支持dark/white
enablePullDownRefresh Boolean false 是否开启下拉刷新

3).tabBar

tabBar

用于配置小程序的菜单选项。tabBar是一个数组,只能配置最少2个、最多5个tab,tab按数组的顺序排序,其具体配置属性如表2.3

表2.3  tabBar属性配置
属性 类型 必填 默认值 描述
color HexColor   tab上的文字默认颜色
selectedColor HexColor   tab上的文字选中时颜色
backgroundColor HexColor   tab的背景颜色
borderStyle String black tabBar上边框的颜色,仅支持black/white
list Array   tab的列表,详见表2.4
position String bottom 可选值bottom、top

tabBar的属性list是一个数组,数组中的每一项都是一个对象,属性表如表2.4

表2.4  list属性
属性 类型 必填 说明
pagePath String 页面路径,必须在pages中先定义
text String tab上按钮的文字
iconPath String 图片路径,icon大小限制为40KB,建议尺寸为81px * 81px
selectediconPath String 选中时的图片路径,icon大小限制为40KB,建议尺寸为81px * 81px

例如:将两个页面链接指向首页和日志页:

"tabBar":{
     "list":[{
       "pagePath":"pages/index/index",
       "text":"首页"
      },{
       "pagePath":"pages/logs/logs",
       "text":"日志"
      }]
}

4).networkTimeout

networkTimeout属性可以设置各种网络请求的超时时间,具体属性如表2.5

表2.5  networkTimeout属性
属性 类型 必填 说明
request Number wx.request的超时时间,单位毫秒,默认为:60000
connectSocket Number wx.connectSocket的超时时间,单位毫秒,默认为:60000
uploadFile Number wx.uploadFile的超时时间,单位毫秒,默认为:60000
downloadFile Number wx.downloadFile的超时时间,单位毫秒,默认为:60000

2.page.json

每一个小程序页面可以使用.json文件来对本页面的窗口表现进行配置,页面中配置项会覆盖app.json的window中相同的配置项。page.json配置属性如表2.6

表2.6  page.json的配置属性
属性 类型 默认值 描述
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色
navigationBarTextStyle String white 导航栏标题颜色,仅支持dark/white
enablePullDownRefresh Boolean false 是否开启下拉刷新
backgroundTextStyle String dark 下拉背景字体、loading图的样式、仅支持dark/white
backgroundColor HexColor #ffffff 窗口的背景色
navigationBarTitleText String 导航栏标题文字内容
diaableScroll Boolean false 设置为true,则页面整体不能上下滚动

仅是自己在学微信小程序的笔记。

时间: 2024-08-29 12:11:10

微信小程序开发-笔记的相关文章

微信小程序开发笔记6——小程序添加并使用外部字体(亲测可用)

学习参考链接: http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1211 -- 完毕,更多精彩看请下一笔记. 原文地址:https://www.cnblogs.com/Wisdon/p/8759072.html

微信小程序开发:学习笔记[1]——Hello World

微信小程序开发:学习笔记[1]--Hello World 快速开始 1.前往微信公众平台下载微信开发者工具. 地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 2.打开微信开发者工具,并新建项目 打开微信开发者工具,选择新建小程序项目,我们先不需理解AppID的概念,新建项目时选择无AppID,并取消勾选"建立普通快速启动模板"的选项. 3.在根目录添加代码 1.在根目录创建app.json文件 2.

微信小程序开发:学习笔记[2]——WXML模板

微信小程序开发:学习笔记[2]--WXML模板 快速开始 介绍 WXML 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件.事件系统,可以构建出页面的结构. 打开开发工具的编辑器,在根目录下找到 app.json 文件,双击打开,在 "pages/index/index" 上新增一行 "pages/wxml/index" 保存文件.模拟器刷新后,读者可以在编辑器中找到 pages/wxml/index.wxm

微信小程序开发:学习笔记[3]——WXSS样式

微信小程序开发:学习笔记[3]--WXSS样式 快速开始 介绍 WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果. WXSS与Web开发中的CSS类似.为了更适合小程序开发,WXSS对CSS做了一些补充以及修改. 文件组成 项目公共样式:根目录中的app.wxss为项目公共样式,它会被注入到小程序的每个页面. 页面样式:与app.json注册过的页面同名且位置同级的WXSS文件.比如注册了pages/rpx/index页

微信小程序开发:学习笔记[5]——JavaScript脚本

微信小程序开发:学习笔记[5]--JavaScript脚本 快速开始 介绍 小程序的主要开发语言是 JavaScript ,开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求. 在大部分开发者看来,ECMAScript和JavaScript表达的是同一种含义,但是严格的说,两者的意义是不同的.ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言, JavaScript 是 ECMAScript 的一种实现.理解 JavaScr

微信小程序开发之数据存储 参数传递 数据缓存

微信小程序开发内测一个月.数据传递的方式很少.经常遇到页面销毁后回传参数的问题,小程序中并没有类似Android的startActivityForResult的方法,也没有类似广播这样的通讯方式,更没有类似eventbus的轮子可用. 现在已知传递参数的方法只找到三种,先总结下.由于正处于内测阶段,文档也不是很稳定,经常修改,目前尚没有人造轮子. 先上GIF: 1.APP.js 我把常用且不会更改的参数放在APP.js的data里面了.在各个page中都可以拿到var app = getApp(

微信小程序开发工具使用与设计规范(二)

上一篇文章主要分析了微信小程序应用场景和优劣势.本篇你可以学习到: 如何使用小程序开发工具写一个Hello World 微信小程序设计规范 微信小程序项目结构 >>>微信小程序开发工具使用 下载安装小程序 下载 :微信web开发者工具 下载:官方DEMO源码 本系列教程使用的是mac版的开发者工具. 安装完成后,打开微信web开发者工具 1.扫码登录,绑定个人微信 2.扫码登录后,新建或导入已有项目(这里使用官方提供的DEMO源码quickstart) 3.新建项目,导入刚下载的quic

Java微信小程序开发_00_资源帖

1.微信小程序开发:http://blog.csdn.net/column/details/13721.html?&page=1 2.微信小程序栏目:http://blog.csdn.net/column/details/14653.html?&page=2 3.

微信小程序开发心得

微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认证信息如,营业执照等 再次就是用一个未曾开通过公众号的QQ号或微信号来注册一个微信小程序号. 最后,下载微信小程序开发工具. 由于这里,我们更多的关注如何去开发一些app,而不是科谱微信小程序,故在此不在过多的解释,详细的说明,可以去官网帮助文档. 首先,我们拿自己的项目在一步一步的说明并开发吧,