微信小程序基础学习笔记

一、环境准备

开发微信⼩程序之前，必须要准备好相应的环境

1. 注册账号

建议使用全新的邮箱，没有注册过其他小程序或者公众号的。
访问 注册⻚⾯，耐⼼完成注册即可。

2. 获取APPID

由于后期调⽤微信⼩程序的接⼝等功能，需要索取开发者的⼩程序中的 AAPID ，所以在注册成功后，
可登录，然后获取APPID。

登录 成功后可看到如下界⾯，然后复制你的APPID,悄悄的保存起来，不要给别⼈看到。

3. 开发工具

下载地址


微信⼩程序⾃带开发者⼯具，集开发 预览 调试 发布 于⼀⾝的完整环境。但是由于编码的体验不算好，因此建议使⽤ vs code + 微信小程序编辑工具来实现编码，vs code 负责敲代码， 微信编辑工具负责预览或调试。

---

二、第一个微信小程序

1. 打开开发者工具

第一次打开开发者工具时，需要扫码登录

2. 新建微信小程序

3. 填写项目信息

4. 创建成功

---

三、微信开发者工具介绍

详细的使用请查询微信小程序开发的官方文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

四、小程序的结构目录

小程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣ APP 体验的服务。⼩程序框架提供了⾃⼰的视图层描述语⾔ WXML 和 WXSS ，以及 Javascript ，并在视图层与逻辑层间提供了数据传输和事件系统，还增加了JSON配置文件，许多配置可以在JSON文件中实现，让开发者能够专注于数据与逻辑。

下图是建立新项目的默认配置

接下来我会详细的介绍小程序框架中各个文件的作用以及如何使用。

1. 项目配置文件 project.config.json

文件中的配置选项一般我们是不用手动修改的，都是在右侧的本地设置中以图形化的方式来配置项目。

2. 微信索引配置文件 sitemap .json

微信官方文档给出：微信现已开放小程序内搜索，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时，会携带特定的 user-agent：mpcrawler 及场景值：1129。需要注意的是，若小程序爬虫发现的页面数据和真实用户的呈现不一致，那么该页面将不会进入索引中。
简单来说就是提高小程序的曝光率。

具体的属性配置可以参考微信小程序的官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html

3. app.js

APP( ) 的作用是注册整个小程序，APP（）接受一个 Object 参数，其指定小程序的生命周期回调等。App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

4. 全局配置文件 app.json

app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

5. 页面结构文件，index.wxml

这个文件和我们web中的html差不多，这里使用的view标签作为一个块级元素。

6. 页面样式文件 ，index.wxss

这个文件对结构进行修饰，常用单位是rpx，常用布局为弹性盒子布局

7. 页面配置文件，index.json

这个文件是属于页面的配置文件，新增的属性usingComponents可以自定义组件 ，在上面说过，页面的配置文件会高于全局配置文件的优先级。

五、小程序的页面语法

1. 数据绑定

1.1 初始化数据

	<view> {{ message }} </view>

1.2 使用数据

	Page({
		data: {
		message: 'Hello MINA!'
		}
	})

1.3 修改数据

	this.setData({
		message:'修改之后的数据'
	})

2. 运算

2.1. 三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

2.2. 算数运算

<view> {{a + b}} + {{c}} + d </view>

Page({
data: {
a: 1,
b: 2,
c: 3
}
})

2.3. 逻辑判断

<view wx:if="{{length > 5}}"> </view>

2.4. 字符串运算

<view>{{"hello" + name}}</view>

Page({
data:{
name: 'MINA'
}
})

注意：花括号和引号之间如果有空格，将最终被解析成为字符串

3. 列表渲染

3.1. wx:for

项的变量名默认为 item wx:for-item 可以指定数组当前元素的变量名

下标变量名默认为 index wx:for-index 可以指定数组当前下标的变量名

wx:key 用来提高数组渲染的性能

wx:key 绑定的值 有如下选择

① string类型，表示 循环项中的唯一属性

list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]
wx:key="id"

② 保留字*this，它的意思是item本身，*this代表的必须是位的字符串和数组

list:[1,2,3,4,5]
wx:key="*this"

使用：

<view wx:for="{{array}}" wx:key="id">
{{index}}: {{item.message}}
</view>

Page({
	data: {
		array: [{
		id:0,
		message: 'foo',
		}, {
		id:1,
		message: 'bar'
		}]
	}
})

3.2 block

渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素

<block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
	<view> {{index}}: </view>
	<view> {{item}} </view>
</block>

3.3 条件渲染

3.3.1 wx:if

在小程序框架中，使⽤ wx:if="{{condition}}" 来判断是否需要渲染该代码块：

<view wx:if="{{false}}">1</view>
<view wx:elif="{{true}}">2</view>
<view wx:else>3</view>

3.3.2 hidden

<view hidden="{{condition}}"> True </view>

类似 wx:if 频繁切换使用 hidden 不常使用 wx:if

---

官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/