微信小程序学习笔记一

一.微信公众平台

1.微信小程序

2.微信公众号

二.微信小程序的注册

1.准备一个从没在公众平台和我的微信用过的邮箱 （最好本身再注册一个全新的邮箱）

2.登陆微信公众平台, 进行小程序的注册. 选择我的, 而后填写信息.进行登陆以后, 在首页，开发中. 而后点击开发设置 进行获取 AppID(小程序ID)

三.下载微信开发者工具

1.使用工具

2.使用Visual Studio Code ，配置预处理

1.在项目新建.vscode文件里面新建settings.json文件，这个文件是使vscode不显示微信的wxss文件

2.settings.json的代码

{
  "files.exclude": {
    "pages/**/*.wxss": true,
  }
}
复制代码

3.在vscode的设置

把下面的代码放进去就能够了

"less.compile": {
    "outExt": ".wxss"
  }
复制代码

4.配置完成后就能够使用了预处理写样式了，你在less中写的样式会自动转换成wxss的

四.小程序和传统web的结构的区别

1.传统web结构

1. 标签 html
2. 样式 css
3. 逻辑 JavaScript

2.小程序的结构

1. 标签 wxml
2. 样式 wxss
3. 逻辑 .js
4. 配置 .json

3.小程序的文件结构的介绍

- pages // 包含了全部页面
	- index // 页面文件夹
		- index.js    // 页面的脚本逻辑文件
		- index.wxml  // 页面模板文件
		- index.wxss  // 页面样式文件
		- index.json  // 页面配置文件 --->(重要)
		-若是有其余页面, 会在今生成
- utils // 普通的工具函数 -->(不须要注意)
- app.js   // 项目启动入口
- app.json // 全局的配置  --->(重要)
- app.wxss // 全局样式
- project.config.json // 项目的配置文件
--sitemap.json //控制页面是否被搜索到的配置文件
复制代码

4.小程序的全局配置文件app.js

1.pages 配置

(1).能够表示小程序内有几个页面

"pages": [
    "pages/index/index",
    "pages/logs/logs"
  ]
复制代码

(2).快速新建页面（在微信开发者工具），直接pages数组中添加一个list页面

"pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/list/list"
  ]
复制代码

(3).josn文件中不能出现注释

(4).pages 数组中的页面路径地址必须存在pages文件夹中

(5).pages数组中的页面路径地址下标为0，也就是第一个路径在普通编译模式下会做为启动页面

2.1window 的属性

// app.json
{
  "window":{
    "navigationBarBackgroundColor": "#fff", // 导航栏背景颜色 
    "navigationBarTextStyle": "black",      // 导航栏标题颜色，仅支持 black / white
    "navigationBarTitleText": "weChart",    // 导航栏标题文字内容
    "backgroundColor": "#fff",				// 窗口的背景色
    "backgroundTextStyle": "light"，		// 下拉 loading 的样式，仅支持 dark / light
    "enablePullDownRefresh": true			// 设置容许下拉刷新
  }
}
复制代码

2.2配置每一个页面的window

不用加 window属性

{
  "usingComponents": {},
  "navigationBarTitleText": "11111",
  "navigationBarBackgroundColor": "red"
  
}
复制代码

3.tabbar 属性

"tabBar": {
    "color":"#666666",  // 默认字体颜色
    "selectedColor":"#0094ff",  //被选择的字体颜色
    "backgroundColor":"#ff00ff",  //背景颜色
    "borderStyle":"white",  //tabber的上边框颜色
    "position":"bottom",  //tabber在页面的位置 通常在底部
   "list":[
     {
       "pagePath":"pages/index/index", //页面的路径，必须在pages配置先
       "text":"首页",	 //tabber上的文字
       "iconPath":"tabs/tab_home_nor@3x.png", //默认的图片
       "selectedIconPath":"tabs/tab_home_fill@3x.png"  //被选中的图片
     },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "tabs/tab_my_nor@3x.png",
        "selectedIconPath": "tabs/tab_my_fill@3x.png"
      }
   ]
  
  }
//注意：配置了tabBar后，底部栏只对配置的页面可见, 并且tabBar的设置至少两个，最多5个
//tabber上的图片路径,不支持网上路径
复制代码