小程序开发
一、申请帐号
1.点击 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。
2.注册完成以后，登录 https://mp.weixin.qq.com ，我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了 。
这里就是我创建小程序后，生成的APPID。
二、安装开发工具
前往 开发者工具下载页面 ，根据自己的操作系统下载对应的安装包进行安装，有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。
软件打开选择小程序项目，
右边是我们打开小程序的历史记录。这里我们点击+号新建一个小程序项目。
这里我创建了一个myFirstDemo的项目。
下面我们来介绍一下 开发工具的具体情况：
- 点击1我们可以切换账号，并且如果有系统更新的消息，我们会在这里收到推送提醒；
- 234 我们可以点击隐藏我们对应的模块，分别对应左中下；
- 5我们可以选择在不同的模式下运行我们的demo
- 我们可以添加自定义的编译模式，试用场景：
在开发中,遇到一个层级较深的页面,每次都要点击好多步才能调试,也比较闹心,有了自定义编译模式,就方便很多了
点击红圈处, 选择 "+添加编译模式" , 默认的, 启动页面会填入当前预览界面的地址, 启动参数 填写当前页面需要的url参数即可直接跳转调试界面
编译：当我们在修改代码后，通过编译可以实时的在我们的模拟器中查看我们的效果；
预览：可以实时的用真机进行调试；
切后台：切换到不同的场景，来个性化我们的功能；
清缓存：清除工具中的文件、数据、登录缓存等；
版本管理：通过git、svn进行版本管理；
社区：微信官方的开发社区；
测试号：开发者可以申请小程序或小游戏的测试号，并使用此帐号在开发者工具创建项目进行开发测试，以及真机预览体验。
-
image.png
console:打印小程序页面的一些调试log信息；
sources:列出小程序页面的所有脚本信息，并对其进行断点调试；
network：网络请求的状态信息，请求资源的响应数据；
security：
storage：动态修改缓存数据；
APPdata：实时数据查看不同设备的兼容性问题；
Wxml：组件元素的样式修改；
Sensor：我们的地理位置信息；
三、JSON配置
1. app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
工具配置 project.config.json
通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。
考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
WXML 模板
从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中HTML是用来描述当前这个页面的结构，CSS用来描述页面的样子，JS通常是用来处理这个页面和用户的交互，具体wxml可查看：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/index.html。
WXSS 样式
WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。
- 新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
- 提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
- 此外 WXSS 仅支持部分 CSS 选择器
更详细的文档可以参考 WXSS 。
JS 交互逻辑
一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。
四、小程序的启动
微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。
紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
]
}
这个配置说明在 QuickStart 项目定义了两个页面，分别位于 pages/index/index 和 pages/logs/logs。而写在 pages 字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）。
于是微信客户端就把首页的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个首页。
小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行:
App({
onLaunch: function () {
// 小程序启动之后 触发
}
})
整个小程序只有一个 App 实例，是全部页面共享的，更多的事件回调参考文档 注册程序 App 。
程序与页面
你可以观察到 pages/logs/logs 下其实是包括了4种文件的，微信客户端会先根据 logs.json配置生成一个界面，顶部的颜色和文字你都可以在这个 json 文件里边定义好。紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式。最后客户端会装载 logs.js，你可以看到 logs.js 的大体内容就是:
Page({
data: { // 参与页面渲染的数据
logs: []
},
onLoad: function () {
// 页面渲染后 执行
}
})
Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构，于是就得到了你看到的小程序的样子。
在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。
组件
小程序提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼合成自己的小程序。
就像 HTML 的 div, p 等标签一样，在小程序里边，你只需要在 WXML 写上对应的组件标签名字就可以把该组件显示在界面上，例如，你需要在界面上显示地图，你只需要这样写即可：
使用组件的时候，还可以通过属性传递值给组件，让组件可以以不同的状态去展现，例如，我们希望地图一开始的中心的经纬度是广州，那么你需要声明地图的 longitude（中心经度） 和 latitude（中心纬度）两个属性:
组件的内部行为也会通过事件的形式让开发者可以感知，例如用户点击了地图上的某个标记，你可以在 js 编写 markertap 函数来处理：
当然你也可以通过 style 或者 class 来控制组件的外层样式，以便适应你的界面宽度高度等等。
五、代码学习
1.Block标签：类似iOSfor循环的{}里面是循环内容
2.onLoad: function(options) 内容这个方法里面生成一个变量后，通过this.setData法这样并不能找到posts_content,需要给他找个key[图片上传失败...(image-856a09-1621998139831)]
下面是错误操作
冒泡事件:
Bindtap 点击后可能多次响应的，把程序结束掉在重新打开可以解决
入栈跳转：（最多有五级界面 ）
模态跳转：
跳转tab界面：
wx.switchTab({
url: '../homePage/homePage',
})
两种事件，bindtap不会禁止父view的点击事件，catchtap点击后父view的事件可以避免响应。
事件传递参数：
小程序中传递参数有一个固定的格式，（data-）-后面跟的是我们自定义的名字，可以有多个-，譬如data-postid-name-ddd,这里要注意一下，这是我们自定义的名字，当我们在js方法中取对应的参数时
其中dataset下的postid就是我们需要的参数，此外他会根据-把传递参数生成一个驼峰命名的参数
需要我们注意。
注意：event事件中target与currenttarget的区别。
缓存：
利用缓存来存储数据，从而改变界面上的变化，缓存数据在关闭程序从新启动后仍然存在。
1.获取缓存数据：var postCollected = wx.getStorageSync('post_collected');
2.设置缓存数据：wx.setStorageSync('post_collected', postCollected)，前面是key，后面可以是对象，或者是字符串;
3.小程序里面没有更新缓存数据的方法，若是更新，只需从新设置缓存数据即可。
小程序弹框：
小程序的弹框showToast是提示弹框，收藏成功，收藏失败。
showModal是alert,弹框提示不会自动隐藏
已经跳出我们的作用域，所以需要用that赋值一下。
请求：
header 需要注意application/json 请求不到数据
模块：
当用到template模块开发时，如果需要对模块进行样式修改，不能[图片上传失败...(image-7694af-1621998139830)] 来写，因为找不到对应的view，必须像上面一样在外面套一层view，对外层的view进行修改
不同的條件加載不同的圖片：
新的数据绑定方式：
for循环千万不能有空格，避免一些奇葩问题（踩过的坑慎用）
注意存数据的问题：
这句话的意思是
,两者的意思是一样的，所以data中不存在readyData。
界面传值问题：
通过？在后面拼接我们需要传的字段。
具体界面传值可以看：https://www.jianshu.com/p/0135769db89c
margin的使用:
先看margin，margin有4个值：margin:10px 11px 9px 8px; ，按顺序分别代表对象与父容器的上、右、下、左的距离值为10px,11px,9px,8px。
如果只写两个值：margin:10px 5px; ，表示对象与父容器的上下距离值都是10px，与左右的距离值都是5px。
那么这时候我们来看margin:0 auto; ，这个就表示上下的距离值是0，而左右就是自动适应，也就是我们常说的自动居中。
而你所说的margin:auto; ， 就表示上下左右都自动适应。
position : absolute这个属性是让对象脱离文档流，及不按照顺序排列，悬浮在上面，绝对定位
四元表达式用法：
否则：的后面用（）括起来继续用三目运算来写。
理解box-sizing属性border-box，content-box
保持里面内容不变，增加padding
找到同级最后一个元素。
setData与this.data.与this.之间赋值的区别：
Setdata-会对界面进行渲染，及赋值后通过数据绑定更新数据然后刷新界面；
this.data与this.只是对属性进行赋值，并不进行界面渲染，但是他们赋值的层级是不一样的，this.data.是把对象放在了data:{}的目录下，this.是放在外层。