《微信小程序开发入门与实践》

版权声明:所有来自网络,全部不保留。 https://blog.csdn.net/qq_35689096/article/details/88585557

WFP

微信小程序开发–『狗蛋TV』-[微信小程序]

在开发之前

小程序结构

小程序组成: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 思否

微信小程序教程入门篇 (2):给hello world一点颜色瞧瞧-最后有彩蛋-极其详细-[微信小程序]

猜你喜欢

转载自blog.csdn.net/qq_35689096/article/details/88585557