目录
我的第一个微信小程序
一、小程序开发文档
搜索进入“微信公众平台”官方网站，在下方的“账号分类”中，查看“小程序”中的“小程序开发文档”，在“工具”中，选择“微信开发者工具”，下载安装包：稳定版
二、注册登录
在“微信公众平台”首页右上方“立即注册”，选择“小程序”，“绑定邮箱（使用没有在微信公众平台绑定过的邮箱）”、“邮箱激活”、“信息登记”。
输入邮箱密码进行登录。
然后在微信上同意即可。微信扫码也可以登录。
三、新建项目
登录成功后，选择小程序，创建项目demo1，自定义目录位置，注册AppID（在已经登录的微信公众平台，小程序信息—>配置服务器—>开发设置—>复制粘贴AppID）。
添加开发者：就是在公司中会用到，添加项目成员的，可以合作开发项目。
选择“不使用云服务”，使用JavaScript语言，新建。
创建成功后，也可以新建项目。
四、导入项目
导入项目（本机下载好的其他人的项目），也可以改项目名称，目录就是本机下载好的项目，AppID是别人的，要改成自己的，这样就是自己的项目了。
五、删除项目
在登录后，管理项目可以删除项目，只是在编辑器中删除了，真实的还没删除。
永久删除要去硬盘中删除。
六、项目组成
项目分三大块：模拟器，编辑器，调试器
模拟器：相当于一部手机
编辑器：写代码的
调试器：编辑器的下半部分（Network：请求，AppData:记录app里面的数据，可以把数据保存在手机的内存中，Storage：记录本地数据，可以把数据保存在手机的硬盘中，比如内存卡，Wxml：可以查看HTML代码，而谷歌中查看HTML使用Elements）
七、工具栏
一般使用普通编译，编译后的小程序才能应用。
预览：生成一张二维码可以用手机扫码查看里面的功能，这里不能查看功能的错误信息
真机调试：扫码二维码在手机上点击功能，可以在调试器中的Console中查看打印的功能的错误信息（要上线，有自己的域名）
切换后台：场景值就代表通过不同的场景进来的
清除状态：一般全部清除，也可以根据需求清除
上传：就是把写好的代码上传到小程序应用中，然后人工审核
详情：本地设置中，本地调试把（不校验合法域名....取消掉），线上无所谓
八、小程序目录
pages：所有页面，一个文件夹一个页面
index.js：写逻辑，动态请求效果
index.json：页面配置
index.wxml: 静态html文件
index.wxss: 写css样式
utils：写公共方法
app.js：创建小程序对象+启动文件
app.json：整个小程序页面配置
app.wxss: 全局css样式
project.config.json：项目配置文件，比如版本（不要动）
sitemap.json：搜索信息，比如搜索车票
九、全局配置
页面pages配置（添加页面）：在app.json中，添加test页面，放在第一行
"pages": [
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
pages页面中括号里面是数组
进入test文件夹，test.wxml
<text>pages/test/test.wxml在test页面中可以显示</text>
注意：json文件代码不能注释
window配置：
"window": {
"backgroundTextStyle": "light",（下拉loading样式：只允许黑色dark或白色light）
"navigationBarBackgroundColor": "#fff", （导航条背景颜色配置）
"navigationBarTitleText": "WeChat", （导航条标题文本内容）
"navigationBarTextStyle": "black"（导航条文本样式：只能是黑色black或白色white）
"enablePullDownRefresh":true （是否开启全局的下拉刷新）
},
window里面花括号里面是对象
微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
tabBar底部选项卡导航设置：
"tabBar": {
"color": "#0000FF",（未被选中的图标颜色）
"selectedColor": "#FF0000",（已被选中的图标颜色）
"backgroundColor": "#FFCCFF",（图标的背景颜色）
"borderStyle": "black",（边框样式：只能是黑色black或白色white）
"list": [
{
"pagePath": "pages/test/test",（页面路径，点击可以跳转页面）
"text": "这是text",（文本内容）
"iconPath": "images/icon1.png", （图标路径：未被选中）
"selectedIconPath": "images/icon1-active.png"（图标路径：已被选中）
},
{
"pagePath": "pages/test2/test2",
"text": "这是text2",
"iconPath": "images/icon2.png",
"selectedIconPath": "images/icon2-active.png"
}
]
},
tabBar里面的list至少包含2个，不能超过5个
在pages中添加一个test2页面
未选中的是一个图标，已经选择的是一个图标，创建一个目录images，右击images文件夹，选择硬盘中打开，电脑已经准备好的图标
十、页面配置
test2中test2.json页面文件配置（和全局的区别，全局写在window下，布局不需要）
{
"usingComponents": {},
"navigationBarBackgroundColor": "#00CC00",
"navigationBarTitleText": "test2的导航条标题文本内容",
"navigationBarTextStyle": "white"
}
十一、页面数据渲染
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
a:"傻逼",
name:"张三",（字符串类型）
num1:1,
num:2,（数字类型）
flag:false,（布尔值）
list_name: [{ "name": "张三", like: "吃" }, { "name": "李四", like: "喝" }, { "name": "王五", like: "玩" }] （数组类型）
},
/* pages/test/test.wxss */
/* id选择器 */
.sb {
width: 200rpx;
height: 100rpx;
background-color: blue
}
// pages/test/test.wxml
注释：view是标签
<view id="age-{{num}}">
{{name}}is{{a}}
age is {{num}}
</view>
<view>{{num+num1}}</view> （加运算）
<view>{{num}}*{{num1}}</view> （乘运算）
<view>{{num+a}}</view> （拼接）
<view>{{num}}+{{a}}</view> （数字+字符串）
<checkbox checked="{{false}}">复选框</checkbox>（布尔值）
<checkbox checked="{{flag}}">复选框</checkbox>（带有布尔值的变量）
复选框默认未被选中
<view wx:for="{{list_name}}" wx:key="index"> （循环数组内容）
{{index}}:{{item.name}} --->{{item.like}} （数组内容索引）
</view>
<!-- 和上面对比,同样也是标签循环，把item改成key，index改成val -->
<view wx:for="{{list_name}}" wx:for-item="val" wx:for-index="key" wx:key="index">
{{key}}:{{val.name}} --->{{val.like}}
</view>
<!-- 块内循环 -->
<block wx:for="{{list_name}}">
{{index}}:{{item.name}} --->{{item.like}}
</block>
<view wx:if="{{num<5}}"> （条件判断）
你是傻逼
</view>
<view class="sb"> （id选择器）
</view>
这样就可以渲染到test页面中
wxss样式：https://www.cnblogs.com/xiaoyuanqujing/articles/11644430.html
十二、小程序的双线程模型与生命周期
双线程包含两部分：渲染层（对应wxml文件）、逻辑层（对应js文件）
小程序启动流程：https://www.cnblogs.com/xiaoyuanqujing/articles/11767693.html
其他内容：搜索APICloud，这个工具可以快速创建打包一个应用程序（知识点：js，html，css）
小程序整体逻辑：小程序<=>微信官方服务器 <=>自己的web服务
十三、事件和事件冒泡
事件：https://www.cnblogs.com/xiaoyuanqujing/articles/11644436.html
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
a: "sb",
name: "tank",
num: 1,
num1: 2,
flag: true,
list_name: [{ "name": "tank", like: "嫖" }, { "name": "jason", like: "约炮" }, { "name": "饼哥", like: "学习" }],
num_a: 1
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log("我是onLoad")
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
console.log("我是onReady")
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
console.log("我是onShow")
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
console.log("我是onHide")
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
console.log("我是 onUnload")
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
console.log("我是onPullDownRefresh")
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
console.log("我是 onReachBottom")
},
click1: function (e) {
console.log(e)
console.log(e.currentTarget.dataset.name)
console.log("你点我了")
},
click2: function (e) {
console.log(e)
console.log("你在外面蹭")
},
click3: function (e) {
console.log(e)
console.log("我进去了")
},
jia: function () {
var that = this
that.setData({
num_a: that.data.num_a + 1
})
},
click4: function (e) {
console.log(e)
console.log("你在外面蹭的捕获")
},
click5: function (e) {
console.log(e)
console.log("我进去了，捕获")
},
click6: function (e) {
console.log(e)
console.log("你在外面蹭，冒泡")
},
click7: function (e) {
console.log(e)
console.log("我进去了，冒泡")
},
})
====================================
<!--pages/test/test.wxml-->
<!-- <text>pages/test/test.wxml</text> -->
<view id="age-{{num}}">
{{name}} is {{a}}
age is {{num}}
</view>
<view>{{num *num1 }}</view>
<view>{{num}} * {{num1 }}</view>
<view>{{name + a }}</view>
<view>{{name}} + {{ a }}</view>
<checkbox checked="{{false}}">
选我
</checkbox>
<checkbox checked="{{flag}}">
选我
</checkbox>
<view wx:for="{{list_name}}" wx:key="index" >
{{index}}:{{item.name}} --->{{item.like}}
</view>
<view wx:for="{{list_name}}" wx:for-item="val" wx:for-index="key" wx:key="index">
{{key}}:{{val.name}} --->{{val.like}}
</view>
<block wx:for="{{list_name}}" wx:key="index">
{{index}}:{{item.name}} --->{{item.like}}
</block>
<!-- <view wx:if="{{num<5}}">
egon is sb
</view> -->
<!-- <view class="sb">
</view> -->
<button bind:tap="click1" data-name="sb" id="sdasd" class="ss">按钮</button>
<view class="outter" bindtap="click2" data-name="tank">
外面
<view class="inner" bindtap="click3" data-name="jason">
里面</view>
</view>
<view>{{num_a}}</view>
<button bind:tap="jia">加</button>
<view class="outter" capture-bind:tap="click4" bind:tap="click6" data-name="tank">
外面
<view class="inner" capture-bind:tap="click5" catch:tap="click7" data-name="jason"> (catch可以阻止事件传递)
里面</view>
</view>
capture-bind-->捕获
bin-->冒泡
来源：https://www.cnblogs.com/gfhh/p/12292322.html