WFP
文章目录
在开发之前
小程序结构
小程序组成:3 个应用程序级别文件(app.js、app.json 和 app.wxss) + 多个应用程序级别平行的文件夹(pages文件夹存放小程序页面,images文件夹存放小程序图片等)。
pages文件夹下有多个页面文件夹,每个页面文件夹中有 4 个页面级别文件(.js、.json、.wxml 和.wxss)。
app.json
.json文件中不可以写注释。
{
"pages":[
"pages/index/index"
]
}
pages接受一个字符串数组,来指定小程序由哪些页面组成。
数组每一项代表对应页面【路径+文件名】,每一项之间用
,
隔开。
第一项代表小程序的初始页面。小程序中新增/删除页面,都需要对pages数组进行修改。
pages中的路径为相对路径。文件名不需要写文件后缀,因为MINA会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。
window用于设置小程序的状态栏、导航条、标题、窗口背景色。
app.wxml
关于微信web开发工具
在使用时出现未知的错误,请关闭工具在重新打开。
js文件不能为空
出现脚本错误或者未正确调用 Page()
出现这个错误是因为js文件不能为空,可以写个 Page({ })
。
json文件不能为空
可以写个{}
。另 .json文件中不可以写注释。
全局样式和局部样式
全局样式写在app.wxss里;
页面样式写在各个页面.wxss样式中。
新建小程序项目
标签样式class和id
标签样式优先级:id(#) > class(.) > 标签。
另,标签样式优先级:页面id(#)样式 >app.wxss中id(#)样式 >页面class(.)样式>app.wxss中class(.)样式 >页面标签样式 > app.wxss中标签样式。
class
<!-- .wxml -->
<text class="red">hi u_o</text>
/* .wxss */
.red{
color: red;
}
id
<!-- .wxml -->
<text id="blue">hi u_o</text>
/* .wxss */
#red{
color: blue;
}
标签
<!-- .wxml -->
<text>hi u_o</text>
/* .wxss */
text{
color: green;
}
附录
7insummer/orange-can: 《微信小程序入门与实践》一书小程序源代码
微信小程序教程入门篇 (1):10分钟从0开始写一个hello-world-极其详细 - 微信小程序开发教程极其详细系列 - SegmentFault 思否