微信小程序开发——学习笔记（一）微信小程序开发——学习笔记

微信小程序开发——学习笔记（一）前期准备

软件下载：
- Nodejs（8.0以上）
- 微信开发者工具（使用最新版）

微信公众平台/小程序
微信公众平台

微信公众平台（涵盖项目）： 2013-(订阅号)、2017-(小程序)、2018-(小游戏)
小程序特点：轻量app，无需下载即可使用，用完即走

微信小程序优势：

基于微信平台，天然的海量用户
无需下载直接使用，节省企业开发成本、推广成本

微信小程序——开发工具
注意事项：
调试基础库版本：2.2.4、2.2.5（或更高）
云开发版本：2.2.3（最低要求）
常见错误：
(1)权限错误: 不用理会
(2)函开发未定: 不用理会
(3)addEventListener: 不用理会
微信小程序——创建网页(组件)
创建前准备 1.将pages文件夹下的内容删除
2.将images文件夹下的内容删除
3.app.json文件下的pages数组下的内容删除，并创建pages/.../...文件（如："pages/home/home"）
微信小程序文件结构

文件名	解释
app.json	全局配置文件
pages目录(己经存在)	存放所有页面文件的地方

app.json下的pages:[]中表示，当前项目中所有网页配置信息，在该数组下的第一行代码就是显示的第一个界面（模拟器显示的第一个）
pages目录下的文件(xxx.wxml、xxx.wxss、xxx.json、xxx.js)
微信小程序——wxml 介绍：小程序没有使用html，它使用xml (可扩展标记语言)格式的wxml
常见标签(组件)

组件	解释
	相当于块级元素
	相当于行内元素
	相当于文章图片图片元素

开发文档——组件(包含各种标签...)

https://developers.weixin.qq.com/miniprogram/dev/component/icon.html

微信小程序——wxss(css) 注意：wxss的样式语言大多数功能与css相通
※：单位(微信专用)——rpx(responsive pixel)响应式像素，可以根据屏幕宽度自动调整元素大小。小程序中rpx，依据当前设置自动调用。
公共样式文件用法：@import "样式所在路径" ----作用：引入公共样式文件
例如：在文件目录下的style文件夹中新建一个common.wxss文件，在该文件中写入css样式后保存文件，那么在其他不同的目录下，若要引入该样式文件，需要在该pages文件下的.wxss文件中的顶端加入@import "../../style/common.wxss"代码即可达到引入公共样式文件的目的。

graph LR M(公共样式文件-如:common.wxss)-->|保存在|B A[文件夹miniprogram]-->|包含|B[文件夹style]-->|包含文件|C[common.wxss等] A-->|包含|D[文件夹pages]-->|包含|E[文件夹example等] E-->|包含文件|F[.wxml] E-->|包含文件|G[.wxss] E-->|包含文件|H[.js] E-->|包含文件|I[.json] N(部分小程序目录结构图)

这里的文件夹example可以手动创建，但创建完成后必须在该文件夹下手动创建与文件夹名相同的pages文件；同时也可以自动创建只需打开小程序的app.json文件，在该文件下的pages数组中添加"pages/文件夹名/文件名"（注意：文件夹名和文件名最好相同）。
当我们写好公共样式文件后，便可根据小程序的目录结构逆推文件的路径。（PS：个人感觉类似==dos和Linux中的cd ..==返回上级目录）
逆推过程如图：(当前页面的样式文件 exam.wxss)

graph LR A[文件exam.wxss]-->|上级目录|B[文件夹exam]-->|上级目录|C[文件夹miniprogram] C-->|目录下含有|D[文件夹style] D-->|目录下含有|E[各种公共样式文件,如:common.wxss] F(根据如上逆推)-->|可得到路径|G[../../style/common.wxss]

得到的路径便可在任意页面下的.wxss文件中加入@import "../../style/common.wxss"代码，引入公共样式文件。
注意：小程序与网页同名样式文件将自动加载。
微信小程序——json(配置文件) json文件介绍关于部分json文件的介绍

文件名	解释
project.config.json	当前项目配置文件
app.json	全局配置文件

app.json配置文件中的选项会影响当前项目的所有组件
部分配置文件代码：

{ //组件列表; 第一个组件默认显示在终端中 "pages":[], //全局窗口样式 "window": { "backgroundColor": "#F6F6F6",//小程序界面背景颜色 "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#F6F6F6",//终端顶部的背景颜色 "navigationBarTitleText": "云开发 QuickStart",//小程序的标题 "navigationBarTextStyle": "black"//标题字体颜色，只能是black和white }, }

app.json文件构造在小程序中加入底部导航条的写法：在json文件中添加如下代码

"tabBar": {//底部导航条 "list": [ { "pagePath": "组件路径",//点击按钮时跳转到该组件 "text": "按钮文本", "iconPath": "图标路径", "selectedIconPath": "选中时图标路径" }, //例如 { "pagePath": "pages/exam/exam", "text": "购物车", "iconPath": "images/shopcar.png", "selectedIconPath": "images/shopcar_select.png" } ] }

常见错误