欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序学习笔记1

程序员文章站 2024-02-11 16:53:46
...

微信小程序: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
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
三、WXSS样式
类似CSS
四、JS交互
后面这两个东西之后会慢慢讲

相关标签: 微信 小程序