开发者学堂课程【高校精品课-上海交通大学 -互联网应用开发技术：微信小程序2】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/76/detail/15777
微信小程序2
内容介绍：
一、程序与页面-页面
二、组件
三、API
四、事件
五、兼容
六、wx.request 接口
七、设置超时时间
八、请求前后的状态处理
九、推荐学习资料
十、总结
一、程序与页面-页面
1、页面的用户行为:小程序宿主环境提供了四个和页面相关的用户行为回调
-下拉刷新onPullDownRefresh监听用户下拉刷新事件
-上拉触底onReachBottom监听用户上拉触底事件
-页面滚动onPageScroll监听用户滑动页面事件
-用户转发onShareAppMessage只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮
-代码清单3-13使用onShareAppMessage自定义转发字段
// page.js
Page({
onShareAppMessage:function(){
return {
title:'自定义转发标题',
path:'/page/user?id=123
页面里面可以绑定一些动作，例如下拉刷新、上拉触底、页面滚动、用户转发等等，右上角菜单会显示转发按钮，对应的应该在配置的构造器里面写相应的函数的内容，比如说转发，就会写转发的题目是什么，把它转发到哪里去？
2、页面跳转和路由-页面栈
在多个页面构成的小程序栈里面，跟 web 不一样，它是靠手在手机上滑动，会有一个叫做 wx.navigateTo 导航到一个新的页面。
但是整个所有页面全都在一个页面栈里，这就是它页面跳转的逻辑。每讲一个前端框架，都必须要讲页面跳转逻辑。它的页面跳转逻辑是通过页面栈来实现的，在页面栈里会记下来当前已经经历过的页面。
3、（1）页面路由
- 假设页面栈:[pageA,pageB,pageC ]
-其中pageA在最底下，pageC在最顶上
- 使用wx.navigateTo({url:'pageD'})可以往当前页面栈多推入一个
pageD
·此时页面栈变成[pageA,pageB,pageC,pageD]
-使用wx.navigateBack（）可以退出当前页面栈的最顶上页面
·此时页面栈变成[pageA,pageB,pageC]
-使用wx.redirectTo({url:'pageE'})是替换当前页变成pageE
·此时页面栈变成[pageA,pageB,pageE]，当页面栈到达10层没法再新增的时候，往往就是使用redirectTo这个API进行页面跳转
（2）比如说在 pageA 页面是首页，首页登录之后进入第二个页面就是B页面。
假如A是 login，B是图书的详情（booklist），C是具体的一本图书。往回页面上会有箭头，会按照栈的方式弹栈，所以不会从C一下弹到A，一定要经历B才能过来。navigateTo 的意思要从当前页面跳转到另一个页面，navigateTo 后面写了url：‘pageD’ 要跳转到D这个页面，就进入到这个栈里面，D再往前回翻的时候会翻到C，以此类推。
navigateBack 和 navigateTo 的差别是 navigateBack 可以退出当前页面，栈不能一直不断增加，回退的时候可以把它彻底的从栈里面弹出去，然后退出当前页面栈的最顶上页面，就是把B直接弹出去。假如要找的商品不存在，通过编程的方式把它 back 又自动回到了C页面。
这样访问的话有一个问题，当页面栈达到十层的时候，小程序有了限制，达到十层的时候就出错了，不能再增加了，不能再增加还想访问，可能不需要一页一页按照顺序翻过去，当前C页面直接让 redirectTo 那个页面不像 navigateTo 把C在栈里面的时候通知D进栈多一层，而是C本身在栈里面不要了，将来回不到C了，直接跳到E，丛E再往回回的时候进入C的页面，最后从B直接进入C，从C跳到E，然后E再往回退的时候只能退到B。
4、路由的逻辑是下面看到的关系：
它们跳来跳去的时候会触发页面的一些动作，比如说打开第一个页面 onLoad、onShow 就是在加载整个页面显示出来的两个方法，第一个页面的两个方法就会被调用。当调用 navigateTo 的时候，就是从A要跳到B的时候，A的 onHide 会被调用，隐藏起来，B的 onLoad、onShow 分别会在B渲染出来之后被调用。
redirectTo的时候，是把当前的C页面直接退掉，就是销毁直接到E，E将来回不到C，只能回到B，这种时刻A这个页面 redirect 到B，那么A这个页面就 onUnload，被卸载之后调用的方法会被触发，然后B还是一样 。
navigateBack 要退回到前一页，当前这个页会被卸载掉，刚才那个页 navigateTo 过来，只是被隐藏了，所以现在要onShow，再把它显示出来。
微信的小程序重新用和由多个 Tab 页构成的一个页面怎样操作，这需要查看官方文档，但是我们在小程序里可能不太会用到切换、调用 API wx.switchTab 方式 ，它的交互方式比较麻烦，相当于在一个页面里还有很多个 tab 页，下面的是完整页面，上面的 tab 页是123，里面显示不同的内容，比较累赘。
5、当前的页面在进入到每一个页面哪些函数会被调用，不在仔细讲解。
二、组件
1、小程序的开发页面和 React 一个道理，一定要做构建化，无论是 react还是 vue 一定要做构建化，把前端的东西变成一些基本的元素，然后把它们用构建（component）呈现出来，组装成一个完整的页面。微信的小程序也是这个套路，组件就是小程序页面的基本组成单元，每一个组件都有id、class、style、hidden 等。
2、举个例子，
像 Image 图片的属性，除了刚才的还有一些别的，比如说它的图片在哪里，要做裁剪、缩放，可能给它留的空间并不是照片的大小，所以需要通过缩放和裁剪来呈现。
lazy-load 一开始可能不加载，当访问到这个页面，下拉一个很长的页面，一开始只显示了上面一部分，下拉的时候下面有图片，一开始不加载，当下拉要显示到的时候再加载。binderror 表示出错的时候该怎么办，出错显示 event.detail=｛errMsg：‘something wrong’｝，bindload 表示图片加载完毕之后该怎么办，加载完毕之后其实什么也可以不显示，根据图片的内容在后台记录一个信息可以便于后面去访问。控件数量太多，不再讲每一个控件怎样使用。
三、API
1、（1）宿主环境提供了丰富的API，可以很方便调起微信提供的能力。
https://mp.weixin.qq.com/debug/wxadoc/dev/api/
小程序提供的API按照功能主要分为几大类:
网络、媒体、文件、数据缓存、位置、设备、界面、界面节点信息还有一些特殊的开放接口。
API一般调用的约定:
- wx.on*开头的 API是监听某个事件发生的API接口，接受一个 Callback 函数作为参数。当该事件触发时，会调用Callback函数。
- 如未特殊约定，多数 API接口为异步接口，都接受一个Object作为参数
- API的Object参数一般由success、fail、complete三个回调来接收接口调用结果
- wx.get*开头的API是获取宿主环境数据的接口
- wx.set*开头的API是写入数据到宿主环境的接口
（2）把小程序部署在微信客户端，微信本身提供大量 API，比如说打开摄像头或访问网络，或者是访问本地的照片等等。一般来说系统调用的 API，可以用到手机上的一些东西，然后这些 API 就屏蔽掉了手机的差异，不管是怎样的手机调这个 API 都能达到目的，底层的异构性靠 API 给屏蔽掉。
微信里的API 一般都以 wx.on* 开头表示在监听某个事件，“*”代表事件，* 会在里面要求写进去一个回调函数。比如说在监听 onload，在页面被加载的时候可能要去回调一个函数，当这个事件被触发的时候调用 Callback 函数。大多数 API 接口多为异步接口，不能调用完以后立马判断里面的逻辑操作是否完成，有可能还没有完成。API 返回的结果一般是 Object 参数，有成功失败和完成这三个调用接口，成功、失败对应的是调用的两种结果，这两个不管怎样，最终都会调用 complete。wx.get* 开头的 API 对微信客户端本身的数据接口进行读；wx.set* 开头的 API 是写入数据到宿主环境的接口。
2、举个例子，
图的下面怎样跟后台Java 写的应用交互？需要用到微信的 API，微信的 API 有一个专门发请求的东西是 wx.request，它跟 fetdj 作用是类似的，用后台去访问。
因为在后台做了跨域的动作，只允许本地跨域，所以调用起来是没问题的。
第一个动作是 url，访问后台的 url 是什么，然后是 data，data 会通过 url 的 hp 请求传递给后台的页面，后台处理的 url 必须是一个 Controller，Controller 能得到 data 的内容；然后是 header，Header组装成了 hp requset的 header，它的内容是一个 json 对象，调用完以后会返回，返回的数据是 res。
wx.request({
url: 'test.php’,
data:{ },
header:{'content-type':'application/json },
需要看它是否成功，如果成功，执行下面函数，
success:function(res){
//收到https服务成功后返回
console.loglres.data)
}，
如果失败执行下面逻辑，
fail:function(){
//发生网络错误等情况触发
}，
不管成功还是失败，最后都要执行complete，要么执行 success complete，要么执行 fail complete，无论调用成功失败都会执行complete，这是后台发起网络连接的过程。
complete: function(){
//成功或者失败后触发
3、API调用
四、事件
1、UI界面的程序与用户的互动
用户在渲染层的行为反馈”以及“组件的部分状态反馈”抽象为渲染层传递给逻辑层的“事件”
前端在 view 上用户会产生一个事件，用户触发事件，触发的事件会发送给 Js，Js 根据事件里定义的回调函数进行处理，产生的结果再发回来就刷新状态。
2、在view上可以点击，点击的时候会产生一个事件，会调用叫 tapName的事件，tapName 事件在 js 文件里面写着函数，执行一些逻辑。有一个 data-* 的属性， 在调用后面的事件的时候可以当做参数传递过来，可以拿到。
<!—page.wxml -->
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
// page.js
Page({
tapName:function(event){
console.log(event)
}
3、常见的事件类型
和web上有很大差异，大量的针对手指来的，因为是用手指再进行操作。
4、事件对象属性
事件触发之后，每一个事件都会有属性，包括它是什么事件，什么时候发生的，在点谁？比如说一个按钮，点击它，触发了一个事件，这个按钮就是 target，按完之后会影响到 curretTarget，比如说一点击就翻页到了下一view，下一个view就叫currentTarget。
5、事件对象示例
<!-- page,wxml -->
<view id="outer" catchtap="handleTap">
<view id="inner">点击我</view>
</view>
// page.js
Page({
handleTap:function(evt){
//当点击inner节点时
// evt.target 是inner view组件
// evt.currentTarget是绑定了handleTap的outerview组件
// evt.type ==“tap"
// evt.timeStamp== 1542
// evt.detail == {x: 270， y:63}
// evt.touches == [{identifier: 0,pageX: 270,pageY: 63, clientX: 270, clientY: 63}]
// evt.changedTouches == [{identifier: 0, pageX: 270, pageY: 63, clientX: 270, clientY; 63}]
在 view里面，通过bindtap或 catchtap 进行操作，刚才是 bindtap，这里怎么变成了catchtap，catchtap 捕获清点动作，它们的区别涉及到冒泡原则。在这个例子里面比较简单，view没有捕捉到事件，事件就抛出到外面，到外面之后 outer 捕捉到它，调用 handleTap 方法处理事件，handleTap 方法里可以写相应的事情，拿到 evt 会把事件暴露进来，事件的 target 是 inner view 组件，点击之后没有处理，抛出来给我，我是真正处理事件的，outer 是真正处理事件的对象，就是所谓的currentTarget，是真正在处理事件的 view，这是在解释 target 和currentTarget 的区别，一个是事件确实在这发生的，一个是真正在处理事件。
事件的类型是 tap，1542代表时间充是什么，｛x：270，y：63｝在哪个位置上点的，identifier: 0 是绝对位置，触摸点的信息包含了相对页面里的控件在什么位置上等等，具体的需要做一些实验才能看出来差异。touches 和 changedTouches 对应刚才说的一个是点，一个是拉动，会有一些变化，这是通过事件本身，通过它们的属性能得到的事件的信息。
6、target 和currentTarget事件对象属性
一个是产生事件的，一个是真正在处理事件的，在它们上面有一些属性，组件的类型、id、以 data-开头的数据集。data-hi 是可以传递到 tapName 函数里面进行处理，可以在属性上通过 dataset 拿到刚才通过 data-hi 传递的内容。
7、touches 和 changedTouches对象属性
“pageX，pageY” 和 “clientX，clientY” 可以理解为一个是整个屏幕，一个是小程序里眼睛看到的区域的坐标轴。
8、事件绑定与冒泡捕获
- 事件绑定的写法和组件属性一致，以key="value"的形式，其中:
·key以bind或者catch开头，然后跟上事件的类型。
·value是一个字符串，需要在对应的页面Page构造器中定义同名的函数。
catch 和 bind 的区别：点了 inner 就没处理了，事件就传递出去到了外面的 outer 处理，就像一个事件在水底产生气泡往上冒，一直冒到上面某一个能捕捉到进行处理。
一个是 bind 开头，一个是 catch 开头，也可以写一个 bindtap 处理，处理完之后这个事件不是到此结束，还是要给 outer 处理一下，inner 处理一下同时抛给 outer，outer 再处理一遍，如果是希望这种情况用 bind，后面跟事件类型；如果认为到 outer 就结束，就用 catch。
如果外面还有一层叫 view id=“mostouter”，假设这里面会定义 bindtap，但是如果这个事件是从 inner 发出来的，inner 自己不处理交给了 outer，outer 处理完之后就结束了，不会再抛给 mostoutre。
但是如果 outer 那里写的是 bindtap，也就是说它自己处理完之后会继续上抛，抛给上面的 mostouter，bindtap 再去处理。catch会截断冒泡的过程，bind 可以理解为像一个拦截器一样不管，于是事件就可以冒泡冒出去，catch就相当于彻底截断，不用在往上冒了。capture-bind* 表示捕获到信号表示的时间，bing* 把事件往上抛继续冒泡。
9、下面写了一个稍微复杂点的例子，点击inner view会先后调用handleTap2 、handleTap4 、handleTap3、handleTap1。
<view
id="outer"
bind:touchstart="handleTap1"
capture-bind:touchstart="handleTap2"
>
outer view
<view
id="inner"
bind:touchstart="handleTap3"
capture-bind:touchstart="handleTap4"
>
inner view
</view>
</view>
outer 定义了一个 bind 和 capture-bind，刚按下去开始滑动事件。outer 里面内嵌了一个 inner，inner 也定义了 bind 和 capture-bind。如果真的在 inner view 点击一下，做 touchstart 的动作，后面定义的函数是怎样调用的？
首先，这个事件会被 inner 捕获，捕获住是要往上抛的，用的是 bind，往上抛冒泡上去，冒泡上去之后到了上面一层，上面这一层按道理要在往上冒泡，但是没有了就到这，到这就捕获住了，捕获之后执行 handleTap2。捕获只是捕获到了，但是还没开始处理，紧跟着捕获住 handleTap4，捕获住之后开始处理，handleTap 3先处理，然后事件在告诉 handleTap 1，再去处理。
会一直冒泡到最外面，然后从外面开始一个一个捕获，然后都开始处理，这样一个顺序在进行执行，这就是所谓的事件的冒泡。一个事件为什么要冒泡呢？有可能在某个小程序里，某个地方划了一下，不光滑的地方要动，整个外围的都需要动一下。
比如说一个地方要使劲划一下，划的目的是把整个页翻过去，而不是翻一小块内容，所以要给上面都要有一个机会进行处理，判断刚才滑动距离的长短，决定是要翻整个页，还是里面一部分内容，这就是冒泡事件的处理规则以及它的应用场景。
10、事件绑定与冒泡
-bind事件绑定不会阻止冒泡事件向上冒泡
-catch事件绑定可以阻止冒泡事件向上冒泡
-如果将上面代码中的第一个capture- bind改为capture-catch，将只触发handleTap2(capture-catch将中断捕获阶段和取消冒泡阶段）。在下面可以看到，
如果把上面划线地方改成 catch，handleTap4 就不会继续往上冒泡，到 handleTap2 就终止，取消冒泡阶段直接进入处理阶段。可以想一下 handleTap4 动作是否还能举行，因为 capture-catch：touchstart=“handleTap2” 表示不在继续冒泡，如果还有一层就更不会抛出去了。
五、兼容
1、通 wx.getSystemInfoSync 获取宿主环境信息
wx.getSystemInfgSync()
/*
{
brand:"iPhone", // 手机品牌
model: "iPhone 6", // 手机型号
platform: "ios", //客户端平台
system:"i0s 9.3.4, // 操作系统版本
version:"6.5.23"， // 微信版本号
SDKVersion:“1.7.0"， // 小程序基础库版本
language:"zh_CN", //微信设置的语言
pixelRatio:2, // 设备像素比
screenWidth:667， // 屏幕宽度
screenHeight;375, // 屏幕高度
windowWidth:667， // 可使用窗口宽度
windowHeight;375， // 可使用窗口高度
fontSizeSetting:16 // 用户字体大小设置
}
*/
通过 wx.getSystemInfoSync 接口调别的属性可以看到手机的品牌、具体的型号、操作系统等等。
2、小程序能否在所有手机上跑，跟 JS Browser 能否在所有浏览器里跑是一个道理，要去做一些判断，所以可以用 canIUse 这样的方式，它会返回一些值告诉我们是否能用。
也就是说在开发一个微信程序的时候，第一不能假设用户的版本号（version），第二不能知道他的手机是什么，所以需要做一些访问性编程，如果用的是微信最新版本里面提供的功能，在编程的时候需要先看一看用户手机支不支持这个动作，如果不支持是不能用的，所以代码里必须要写，不能假设所有用户都升级到最新版本。
六、wx.request 接口
1、如果我们需要从https://test.com/getinfo接口拉取用户信息，其代码示例如下所示：
wx. request({
url:'https://test.com/getinfo',
success: function(res) {
console.log(res)// 服务器回包信息
重点是 request 接口，这个接口就是要去和后台访问，重要的是有一个 url，如果成功就调用 function（res）函数，这是一个回调函数。
2、wx.request 详细参数
复杂一点的它的参数包括 url、请求要传递过去的参数、请求头、用什么方法去写，必须要大写。然后是 dataType，默认值是 json，不管成功还是失败都要用 complete。
3、请求参数
（1）通过 wx.request 这个API，有两种方法把数据传递到服务器:通过url上的参数以及通过data参数。
//通过url参数传递数据
wx.request({
url:'https://test.com/getinfo?id=1&version=1.0.0’,
success: function(res){
console.log(res)//服务器回包信息
}
})
//通过data参数传递数据
wx.request({
url:'https://test.com/getinfo',
data:{id:1,version:'1.0.0'},
success: function(res){
console.log(res)//服务器回包信息
}
}）
要访问 data:{id:1,version:'1.0.0'} 页面，同时要给它传递的参数是 id:1,version:'1.0.0'，传递的数据在这里面默认 json 的数据传过去，一旦返回成功，就调 console.log(res) 函数做相应的事情，这就是这个接口的内容。
（2）-wx.request发起 POST 请求包体使用 json 格式
//请求的包体为 {"a":{"b":[1,2,3],"c":{"d":"test"}}}
wx.request({
url:'https://test.com/postdata’，
method: 'POST,
header: {'content-type': 'application/json'},
data: {
a:{
b: [1, 2,3],
c: { d: "test" }
}，
success: function(res) {
console.log(res)//服务器回包信息
}
method 设成 POST，POST 一定是带参数的，所以在 data 里面一定有内容，a里面是一个键值对的数组，就是一个 json 对象；b这个键对应“1，2，3”，c对应的又是一个键值对，这样的东西会封装起来，以 json 的方式传递到 https://test.com/postdata。所以前后台的信息，尤其是前两个要对起来。如果返了一个 json 出去，拿到res 之后，剩下的信息在 console.log(res) 里写，而这个代码就是 js 代码，跟之前在 react 里面解析，或者用原生的 js 解析 json 对象是一样的，这时候跟微信本身的语法就没关系了。
4、收到回包
-wxrequest 的 success 返回参数
success 会返回一个数据，这个数据就是封装到 result 里面的内容，有数据、状态码、header，就是 Response-Header。
七、设置超时时间
app.json 指定 wx.requset 超时时间为3000毫秒
"networkTimeout":{
"request": 3000
在访问的时候跟后台交互，可能会经历很长时间，可以在小程序的全局设置文件里设所有的请求在返回结果的时候不会等待超过三秒，这就是在微信里看到的，一点的时候速度很慢，过了一会网络不通或者超时等等。会出现这个就是因为设了时间，当超过这个时间点，还没有返回，不能让小程序死循环一直等，加上 Timeout 表示暂时无法访问，请稍候再试，这样至少给用户一个机会返回做别的操作，否则小程序就死机了。
八、请求前后的状态处理
1、
var hasClick= false;
Page({
tap: function（）{
if(hasClick){
return
}
hasClick = true
wx.showLoading（）
wx.request({
url: 'https://test.com/getinfo',
method: 'POST,
header: {'content-type':'application/json'}，
data: { },
success: function(res){
if(res.statusCode===200){
console.log(res.data)//服务器回包内容
}
}，
fail: function (res){
wx.showToast({title:'系统错误' })
}，
complete:function(res){
wx.hideLoading（）
hasClick=false
}
这是一个比较复杂的请求，这个请求对 getinfo 页面发一个 POST 请求，失败之后调用微信的 showToast，显示系统错误，相当于弹窗显示。无论怎样，把当前页面隐掉，只要把成功或失败页面执行完，把里面的一些参数设置一下，这就是执行 tap 的时候的动作，一点就发了一个请求到后台，然后后台进行操作。
九、推荐学习资料
微信小程序开发文档：
https://developers.weixin.qq.com/miniprogram/dev/framework/
微信小程序开发者社区：
https://developers.weixin.qq.com/
讲的这些基本上涵盖了小程序开发的主要内容，更复杂的需要看看小程序的官方文档，大体上主要内容都介绍完了。
十、总结
1、总结一下，它跟写一个前端 react 或 real 框架没什么本质区别，一样要有路由，路由就是在 app.json 里写的，会写出所有的页面的位置，然后每一个页面原来都是在 .js 里面写，现在要有四个，要有.js、.wxml、.wxss，还要有 .json 的配置，把它拆分为四个，然后在一个页面里 component 也没什么区别。然后需要用 SetData 改变状态，重新渲染，而且 SetData 是一个异步通信的方式（Async）。和以前框架一样的东西就是在这个里面还要考虑页面这四个在一个目录里，路由在这个里面只是所有的页面，他们的位置在哪里，真正的路由是用 navigateTo 或者是navigateBack 这样的东西进行操作，也就是说路由在操作页面栈，这是和前端 react 和 real 框架有点区别的地方。
最大的区别是整套的事件系统，因为在手机上全部都是触屏，它的事件 click 没有了，把 click 点击动作拆分的很细，有单点一下，有点住它划动，有长时间长按等等，这是差异比较大的地方，其它的跟之前的概念没有什么本质区别，所以只要 react 写出来，有这个感受之后，在看微信的小程序没什么本质区别，而且这里面没有任何新意。wxml 标签不一样，语法接近于 xml，css 和 wxss 也很像，json 之前讲过，也没有什么新的语法需要去学，只是转换一下思想，考虑小程序的结构，去开发一个一个页面。
2、把后台跑的之前的例子跑起来，没有发生然后变化。前端跑微信小程序的例子看一下，这个小程序的例子里面分了几个页面，开始是 index，在 app.json 里面，有三个主要的页面。
"pages/index/index"
"pages/books/books",
"pages/addCartPage/book"
第一个就是首页，访问 index。index用到了 部件，所以在 index.json 配置里会用到下面的控件。
"usingComponents":{
"van-field": “@vant/weapp/field",
"van-button":"@vant/weapp/button"
在 index.wxml 页面里主要有一个用户名，当什么都不输入的时候，有一个占位符。
底下是密码，也是 van-field，这里面有一个 password=ture，输入的是圆点，看不到本身的内容，显示的请输入密码，还有一个错误信息（errorMessage）。<van-field bindblur="bindNameInput” label="用户名" placcholder="谓输入用户名"/><van-field bindblur:"bindPasswordInput" passworda"true" label="密码” placeholdera"调输入密码" error-messagea="{{erroriessage}}" borderm true />
错误信息在 json 文件里，这个 json 文件里会定义错误信息，是用户名密码错误。Index.wxml 页面就两个输入框，下面有个按钮，这个按钮比较长，可以定义它的尺寸，如果点击或绑定 bindViewTap 方法，这个方法往后发一个请求出去，这已经跨域了，后面允许跨域，发到8080的 login。
</van-cell-group>
</view>
<view style:"width:15rem; height:6rem; margin: 5rem o " ><van-button bindtape="bindViewTap" type="primary" block>登录</van-button>
</view>
</view>
3下面是之前的后台，反复用这一个后台。
监听 login，所以就会发出去这样一个请求，发出这个请求用的是 POST 方式，需要把用户名、密码发出去。用户名和密码是怎样发出去的？
回到 index.wxml 页面，当光标离开 bindNameInput 的时候调用它，在用户名输入的时候获取了焦点，一离开 bindblur，会调用 bindNameInput。input 把事件跟给我们，detail 就是在返回这个事件是哪个对象产生的，那个对象的值改写到 userName 里去，不能直接写 =event.detail.value，userName 要通过 SetData 设计，这样页面就会刷新；同样的道理 password input 也是，所以在这里面进行操作的时候，一旦离开焦点，点击光标就不在焦点，他俩的值就有了，有了之后点击登录。Success表示成功，判断返回的状态是什么？如果返回状态不是零就表示后台的信息出错，把 errorMessage 写成用户名密码错误。当 errorMessage 出错的时候显示。
用户名密码输对之后，进入到首页，这和之前看到的前台一样，假如把 web 的前端打开，这两个前端显示的内容是一样的，除了广告语其它的内容都是从后台抓过来，广告语是在前台写的，其他它内容全是从后台抓的。用了一个后台，前端可以有多个，但是访问的方式都一样，通过页面来的，现在首页是怎样访问的就可以看到了。对着 POST 操作，把用户名和密码输进去，用户名和密码输进去光标离开后会绑定，通过下面两个方式绑定到用户名和密码里面去。
//用户名输入
bindNameInput: function(event){
this.setdata({userName : event.detail.value})}，
//密码输入bindPasswordInput (property) password?: string this.setdatal{ password: event.detail.value })
II
一旦访问成功，response 判断里面的状态是零，就表示正常返回，页面就要跳转，除了跳转，还要在后端认证过之后，返给信息存到微信小程序的本地存储里面，后端要把 cookie 存一下。因为 cookie 里面有 sessionid，因为登录信息、购物车等都在sessionid 里 ，拿到 sessionid 后存到微信客户端本地，紧接着就是跳转，跳到 books 目录里的 books 上，跳到下面页面上。"pages/index/index""pages/books/books","pages/addCartPage/book"第一个就是首页，访问 index。index用到了 部件，所以在 index.json 配置里会用到下面的控件。"usingComponents":{"van-field": “@vant/weapp/field","van-button":"@vant/weapp/button"在 index.wxml 页面里主要有一个用户名，当什么都不输入的时候，有一个占位符。底下是密码，也是 van-field，这里面有一个 password=ture，输入的是圆点，看不到本身的内容，显示的请输入密码，还有一个错误信息（errorMessage）。错误信息在 json 文件里，这个 json 文件里会定义错误信息，是用户名密码错误。Index.wxml 页面就两个输入框，下面有个按钮，这个按钮比较长，可以定义它的尺寸，如果点击或绑定 bindViewTap 方法，这个方法往后发一个请求出去，这已经跨域了，后面允许跨域，发到8080的 login。登录3下面是之前的后台，反复用这一个后台。监听 login，所以就会发出去这样一个请求，发出这个请求用的是 POST 方式，需要把用户名、密码发出去。用户名和密码是怎样发出去的？回到 index.wxml 页面，当光标离开 bindNameInput 的时候调用它，在用户名输入的时候获取了焦点，一离开 bindblur，会调用 bindNameInput。input 把事件跟给我们，detail 就是在返回这个事件是哪个对象产生的，那个对象的值改写到 userName 里去，不能直写 =event.detail.value，userName 要通过 SetData 设计，这样页面就会刷新；同样的道理 password input 也是，所以在这里面进行操作的时候，一旦离开焦点，点击光标就不在焦点，他俩的值就有了，有了之后点击登录。Success表示成功，判断返回的状态是什么？如果返回状态不是零就表示后台的信息出错，把 errorMessage 写成用户名密码错误。当 errorMessage 出错的时候显示。用户名密码输对之后，进入到首页，这和之前看到的前台一样，假如把 web 的前端打开，这两个前端显示的内容是一样的，除了广告语其它的内容都是从后台抓过来，广告语是在前台写的，其他它内容全是从后台抓的。用了一个后台，前端可以有多个，但是访问的方式都一样，通过页面来的，现在首页是怎样访问的就可以看到了。对着 POST 操作，把用户名和密码输进去，用户名和密码输进去光标离开后会绑定，通过下面两个方式绑定到用户名和密码里面去。
//用户名输入
bindNameInput: function(event){
this.setdata({userName : event.detail.value})}，
//密码输入
bindPasswordInput (property) password?: string this.setdatal{ password: event.detail.value })
II
一旦访问成功，response 判断里面的状态是零，就表示正常返回，页面就要跳转，除了跳转，还要在后端认证过之后，返给信息存到微信小程序的本地存储里面，后端要把 cookie 存一下。因为 cookie 里面有 sessionid，因为登录信息、购物车等都在sessionid 里 ，拿到 sessionid 后存到微信客户端本地，紧接着就是跳转，跳到 books 目录里的 books 上，跳到下面页面上。这里面的内容靠刚才的内容得到，最简单的这里面有 wx.for，就是把全部的数据显示出来。这个例子开发完在跑的时候出了一个问题，这个工程在加载的时候，还有一种可能跑不起来，在项目设置的本地设置里面，看测试基础库，要选择正确，这里用的是稍微低一点的版本，是2.10.7，它可能有2.11，在 2.11.0里面跑这个例子可能会出错，如果出错需要改版本，默认按最新的加载。拿到例子之后要在配置信息里面，就是 project config.json 里面，把 appid 改成自己申请的 appid。给的例子前端都一样，后端就一个，开发出来就是这样一个套路。下节课会把这个例子详细讲解，接下去讲手机端的APP，手机端的APP在开发的时候需要装 win7，先把安卓 studio 装一下，如果是苹果，还有一个 x code，要能够在idea里面把两个模拟机启动起来。
这里面的内容靠刚才的内容得到，最简单的这里面有 wx.for，就是把全部的数据显示出来。
这个例子开发完在跑的时候出了一个问题，这个工程在加载的时候，还有一种可能跑不起来，在项目设置的本地设置里面，看测试基础库，要选择正确，这里用的是稍微低一点的版本，是2.10.7，它可能有2.11，在 2.11.0里面跑这个例子可能会出错，如果出错需要改版本，默认按最新的加载。
拿到例子之后要在配置信息里面，就是 project config.json 里面，把 appid 改成自己申请的 appid。
给的例子前端都一样，后端就一个，开发出来就是这样一个套路。下节课会把这个例子详细讲解，接下去讲手机端的APP，手机端的APP在开发的时候需要装 win7，先把安卓 studio 装一下，如果是苹果，还有一个 x code，要能够在idea里面把两个模拟机启动起来。
