微信小程序学习笔记(一)

微信小程序学习笔记(一)
刚开始新建项目的时候注册的appID无法使用(显示ID不存在)后来知道用邮箱注册的时候在首页下面的开发栏会给一个个人专属的appID自己练习的时候可以用测试号,但是测试号不能使用云服务,也无法上传,但是想上传小程序的时候可以在最后改成自己的appID。
(一)目录结构详解
(1)MINA.html默认原生框架
(2)每一个页面都包含index.js;index.wxml;index.wxss(不是必须)
index.js来配置界面入口;index.wxml来配置布局与ui;logs.json是页面的配置文件;logs.wxss是页面的样式文件,这两个文件可以在app.json和app.wxss中定义,如果这两个文件也定义了自己的样式,那这里的配置会覆盖掉app.json和app.wxss。
e.g.
当app.json中配置了文字的内容"navigationBarTitleText":“WeChat”,
在log.json中也配置了"navigationBarTitleText":“查看启动日志”
当运行的时候默认是“WeChat”进入页面就会变成“查看启动日志”。
app.js是入口文件,全局文件app.js中会调用一个app的方法,定义项目的启动入口
e.g. App(config);
app.json定义每个页面及基本配置,像整个项目的标题名称e.g. “window”:{};
每个界面又包含了一个index.js,又用了一个Page方法e.g. Page(pageConfig);Page方法里写页面里配置信息同时定义自己的布局文件index.wxml,样式文件index.wxss,配置文件logs.json。project.config.json文件可以修改appid;sitemap.json文件用来配置小程序及其页面是否允许被微信索引;只需要在发布时使用。
(3)微信小程序文件结构和web前端异同: 结构 样式 逻辑 配置微信小程序 wxml wxss javascript jsonweb前端 html css javascript 无
(4)全局配置app.json
(a)pages字段(表示当前页面有几个子页面)
“pages”:
[“pages/index/index(只保留到这里,没有后缀名)”,“pages/logs/logs"如果自己想要创建一个文件可以在代码后面继续写
e.g.“page/demo/demo”(保存后,会自动增加)],想要默认显示新建好的demo文件,只需要把"page/demo/demo"放到pages的最前面,e.g.“pages”:(后面是中括号)
[“page/demo/demo”,
“pages/index/index”,
“pages/logs/logs”],
只有在微信开发者工具里编辑字段增加保存时才会显示新增,换个地方编辑app.json,是不会新增显示的
在这里插入图片描述 (b)window字段(定义所有页面的顶部背景颜色,文字颜色等等) “window”:{}(后面是花括号) 导航栏背景颜色 “navigationBarBackgroundColor”: “#fff”, 导航栏文字 “navigationBarTitleText”: “WeChat”, 导航栏文字颜色 “navigationBarTextStyle”: “black”(文字颜色只能是黑色或者白色) navigation是导航栏 下拉刷新"enablePullDownRefresh”:true或者false下拉刷新小圆点的颜色"backgroundTextStyle": “light"或者"dark” 下拉刷新区域的背景颜色"backgroundColor":“white” (c)tabber字段 未选中的图标路径"iconPath": “iconPath”, 已选中的图标路径"selectedIconPath": “selectedIconPath”