微信小程序开发笔记

这两天开始做微信小程序，稍微总结一下知识点。首先创建一个小程序，之后新建他的目录，和html区别并不大如果学了vue的同学上手会更快。本章节除了基础目录外，实用知识点有【页面跳转】【底部目录】需要的同学可以往下翻，纯手打不易喜欢的点个赞吧。

wxml就是我们的html，和html不同的是他并不需要一些约束比如头部身体他都不需要，可以直接上手撸代码。

wxss就是我们的css文件，样式写法和我们的css文件是一样的，需要注意的是他并不支持这种css写法，但是他支持::before和::after。

p{
    text-align: center;
}
p #color{
    color: red;
}       不支持的写法

js文件中可以需要定义他的data方法，还有json的一定要有{}不然会报错请注意。以及方法内部最后的结尾不能带 ，不然也会报错。

最外面的四个app的文件是他的全局属性，在里面定义的代码之后可以不再定义。json文件里面 pages 装的是你要展示的页面，刚新建的默认的都是“ index/index ”，也就是我们的初始页面，只要是你希望渲染的或者之后会访问的wxml页面都要加在这里不然无法访问，其实不是index也可以，只要是在前面的就默认替换成初始页面，比如“ demo/demo ”最好文件名和里面的刚刚讲的四个文件夹名字一样方便管理。还有就是如果你只给他了给wxml没给他其他的三个小伙伴他会报错并且自动生成出来。

还有就是关于json配置之后如果你想在单独的子页面更改他的全局设置却发现用不了，那是因为你连同window一起带过来了，不需要window的你可以直接在子页面的json的括号中{}写你要改的属性比如说——

{
"navigationBarTitleText": "Demo"
}

在json中还有一个有意思的就是关于他的底部导航栏的设置了，你只要输入tabBar回车就好了。具体参数配置如下。list中最少两个最多五个注意。图标可以去阿里巴巴的图标库，有很多好看的图，附上链接：https://www.iconfont.cn/

"tabBar": {  <!--底部的导航配置属性-->
   "color": "为选择时底部导航栏的颜色",  
   "selectedColor": "选中时底部导航栏的颜色",  
   "borderStyle":"底部导航栏边框样式",  
   "list": [{  <!--导航配置数组-->
     "selectedIconPath": "选中时的图片路径",  
     "iconPath": "未选中时的图片路径",  
     "pagePath": "页面访问地址",  
     "text": "首页"  
   }, {  
     "selectedIconPath": "选中时的图片路径",  
     "iconPath": "未选中时的图片路径",  
     "pagePath": "页面访问地址",  
     "text": "会员"  
   }]  
 },

还有就是关于页面的跳转，<navigator url=“ 你要跳转的页面的地址 ”>你可以把它当作是A标签，如果跳转不了的返回上面好好看看是不是没添加到app.json的pages里面！其他一些常用的语法和js之后再讲。

Boss说还需要背一下 page生命周期，感兴趣的小伙伴可以去看看，在生成js文件的时候会自己生成注释什么的都有标注的很详细。不早了萌芽要睡觉了大家晚安~