微信小程序学习笔记1

微信小程序:QuickStart
一、 .json后缀的JSON配置文件
.json分小程序配置 app.json、工具配置project.config.json和页面配置page。json下面分别说一下:
1、app.json
app.json是对当前小程序的全局配置,包括了小程序的页面路径(pages)、界面表现window、网络超时时间networkTimeout、底部tab等
pages接受一个数组,每一项都是字符串,指定小程序由哪些页面组成。每一项代表对应页面的路径+文件名
window:设置小程序状态栏、导航条、标题、窗口背景色。

{
  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

tabBar 客户端窗口底部或顶部tab栏切换页面用的
这里要注意:当设置position为top时将不会显示icon tabBar中list是一个数组,放2-5个
微信小程序学习笔记1_第1张图片
networkTimeout 设置各种网络请求的超时时间
2、page.json
page.json每一个页面都可以使用,对本页窗口进行配置。优先级要比app.json高,会覆盖app.json中相同设置项
页面的.json只能设置window相关配置项,所以无须写window这个键

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

3、project.comfig.json
这里面主要是针对各自喜好做一些个性化配置,如界面颜色、编译配置等,当你换电脑重新安装工具时需重新配置
所以

考虑到这点,小程序开发者工具在每个项目的根目录都会生成一个 project.config.json,你在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
可以在项目根目录使用 project.config.json 文件对项目进行配置
{
  "miniprogramRoot": "./src",
  "qcloudRoot": "./svr",
  "setting": {
    "postcss": true,
    "es6": true,
    "minified": true,
    "urlCheck": false
  }
}

二、WXML模版
网页编程HTML+CSS+JS,HLML是用来描述当前页面结构,CSS描述页面样子,JS处理页面和用户的交互,WXML类似HTML
不同的是:html经常用div,p,span 。不同的标签组合出不同的组件,wxml将常用的组件包装起来了,常用的标签view,button,text等
微信小程序学习笔记1_第2张图片
三、WXSS样式
类似CSS
四、JS交互
后面这两个东西之后会慢慢讲

你可能感兴趣的:(微信小程序)