小程序运行机制
前台/后台状态
小程序启动后，界面被展示给用户，此时小程序处于前台状态。
当用户点击右上角胶囊按钮关闭小程序，或者按了设备 Home 键离开微信时，小程序并没有完全终止运行，而是进入了后台状态，小程序还可以运行一小段时间。
当用户再次进入微信或再次打开小程序，小程序又会从后台进入前台。但如果用户很久没有再进入小程序，或者系统资源紧张，小程序可能被销毁，即完全终止运行。
小程序启动
这样，小程序启动可以分为两种情况，一种是冷启动，一种是热启动。
冷启动：如果用户首次打开，或小程序销毁后被用户再次打开，此时小程序需要重新加载启动，即冷启动。
热启动：如果用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态，这个过程就是热启动。
——————————————————————————————————
自定义组件
首先需要在 json 文件中进行自定义组件声明
注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。
在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。
在使用该自定义组件的页面的json文件中使用
"usingComponents": {
"component-tag-name": "../custom/custom"
}
定义组件名并且标注组件地址。
**继承样式，如 font 、 color ，会从组件外继承到组件内。
**除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效
页面的生命周期方法（即 on 开头的方法），应写在 methods 定义段中。
Component({
properties: {
paramA: Number,
paramB: String,
},
methods: {
onLoad: function() {
this.data.paramA // 页面参数 paramA 的值
this.data.paramB // 页面参数 paramB 的值
}
}
})
——————————————————————————
使用 Component 构造器来构造页面的一个好处是可以使用 behaviors 来提取所有页面中公用的代码段。
例如，在所有页面被创建和销毁时都要执行同一段代码，就可以把这段代码提取到 behaviors 中。
代码示例：
// page-common-behavior.js
module.exports = Behavior({
attached: function() {
// 页面创建时执行
console.info(‘Page loaded!‘)
},
detached: function() {
// 页面销毁时执行
console.info(‘Page unloaded!‘)
}
})
——————————————————————————————————
监听事件
wxml中
<component-tag-name bind:myevent="onMyEvent" />
js中
Page({
onMyEvent: function(e){
e.detail // 自定义组件触发事件时提供的detail对象
}
})
———————————————————————————————————
触发事件
自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项。
自定义组件中
wxml
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>
js
Component({
properties: {},
methods: {
onTap: function(){
var myEventDetail = {} // detail对象，提供给事件监听函数
var myEventOption = {} // 触发事件的选项
this.triggerEvent(‘myevent‘, myEventDetail, myEventOption)
}
}
})
——————————————————————————————————
组件生命周期
在组件的js的component中
lifetimes: {
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
},
——————————————————————————————————————
弹性盒子布局
wxss
.container {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items:center;
}
wxml
<view class=‘container‘>
<image src=‘/images/33.png‘></image>
<text>这是33</text>
<text>33在拿着手机扫二维码</text>
<text>www.bilibili.com</text>
</view>
本页面的样式只能用于本页面，全局样式可以在app.wxss中定义
——————————————————————————————————
页面跳转
navigator组件
open-type属性，hover-class属性，及使用时注意之处
<text>元素只能包含纯文本，里面有多余的东西会被忽略掉
open-type属性
open-type="redirect"没有返回 open-type="navigate"有返回
hover-class属性
hover-class=‘index-class‘
在对应wxss中写index-class类，可以定义这个链接被点击时候的样式
之前的颜色要在这个类上面定义（物理）
wxml默认组件以属性（内置）定义的都是在最后的
——————————————————————————————————————————
之后又学习了底端栏tabBar，在app.json中，有list，color，selectedcolor，list中至少包含两个部分，每一个部分中又包含text，pagePath，iconPath以及selectedIconPath四个部分。
——————————————————————————————————————————
<h2>第三讲</h2>
数据绑定：js的page中data中的数据，可以通过{{数据名}}的形式进行调用。
js中：
data: { count:123 }
wxml中：
<text>{{count}}</text>
———————————————————————————————
wx:if{}的使用：
js中：
data: { thisindex: { istrue:true } },
wxml中：
<text wx:if="{{thisindex.istrue}}">juyue</text>
—————————————————————————————
wx:for{}的使用：
js data中：
thislist2 : [ { content:"zanmeitaiyang" },
{ content:"xianyoulaojuhouyoutian,taiyangqishirishenxian" },
{ content:"rongyaoshuyutianshengzhankuang"} ],
wxml中：
<view wx:for="{{thislist2}}">
<text>第{{index}}次循环</text>
<text>content:{{item.content}}</text>
</view>
{{index}}是微信小程序列表渲染的内置元素，从零开始，循环一次加一。同样的，也是要用{{}}来使用js中的数据。
_______________________________________
swiper（幻灯片）元素的使用：
在设置幻灯片宽高时，一般要在swiper元素上统一设置。
优化轮播图，看list.wxml中，为显示面板指示
<swiper indicator-dots="{{true}}">,
_______________________________________
生命周期函数：
onLoad:function(options) { } 页面初始化时调用
onShow:function() { } 每次的页面显示都要调用
onReady:function() { } 初始化完成，整个视图准备好了可以开始交互的时候被调用
onHide:function() { } 每次的页面隐藏都要调用
onUnload:function() { } 每次页面被关闭或被卸载都要调用
——————————————————————————————————————————————————
this.setData()函数详解：
在小程序中对内部数据更新不能采用赋值的方式，必须调用小程序提供的this.setData这个方法
可以在逻辑层更新变量的同时更新视图层。
且可以根据需要新增变量（先到data中找变量，如果data中没有就自动创建一个新的变量），而且也不用
this.data.balabala了，可以读到data内部。详情见list页面的js部分
——————————————————————————————————————————————————
事件机制：响应用户交互
bindtap和catchtap的区别：
bindtap冒泡向上传递给父节点，在触发bindtap时如果父节点也有tap绑定的事件，则父节点会一起触发事件，catchtap不冒泡向上传递，只触发本节点的tap事件。
tap事件绑定的事件在js中写
_______________________________________
页面导航：
wx.navigateTo(Object object) ：保留原有页面，可以返回原有页面
wx.redirectTo(Object object)：不保留原有页面，是重定向
________________________________________________
组件的自定义属性：
在组件中 data-xxx-yyy，那么就可以把js中我们自己定义的数据传递给这个属性，我这里是这样的
data-test-id="{{item.id}}" ，这个属性就可以被封装在同节点的时间处理函数的event参数中传给js，后台可以通过
event.currentTarget.dataset.testId来获取上面这个例子的{{item.id}}.
作用就是可以将data中的数据动态的传递给事件处理函数，视图层只是相当于一个中介。
————————————————————————————————————————————————————————————————————
将原页面的数据传给navigateTo的页面：
在用url传参的时候，前面是路径，我在list.js中写的是绝对路径，？后面是对应的参数，参数与参数用&连接。
在导航到的页面，通过该页面的onLoad函数来获取url中的内容。
_______________________________________
wx.request函数：
success回调函数的res对象，
data属性中抽取了responsebody中的文本返回一个字符串，
header中的Content-Type类型是text/html，这时收到的responsebody中的文本直接以字符串的形式保存在data中，
若Content-Type返回的是一个Application JSON的形式，则responsebody中的文本以json格式返回，小程序会将这个文本处理成JavaScript的格式并保存到data中，如果是json对象，就处理成JavaScript对象，如果是json对象数组，就处理成JavaScript对象数组
——————————————————————————————————————————————————
调用外部API
，！！！外部api返回的数据会保存在success的res参数中，我们要做的就是将收到的数据保存到页面内部数据中！！！
请求的url是一个域名+uri的形式，，
把this用 var that = this 保留this对象，
因为在success回调函数中的this指针是指向这个success函数所指向的参数对象，
___________________________________________________________
在页面初始化的最后，也就是调用request方法之后，调用wx.showNavigationBarLoading() 这个api来显示loading动画。 在收到response，也就是收到外部数据之后，也就是在success回调函数里面，最后写wx.hideNavigationBarLoading()这个。
想动态设置标题，用下面这个，也是在success回调函数中 wx.setNavigationBarTitle({ title: ‘‘, })
___________________________________________________________
！！！在使用form表单传值的时候，一定要在input等组件中定义name属性作为key！！！
formSubmit: function (e) {
var formdata = e.detail.value.input;
var that = this;
wx: wx.request({
url: ‘http://baidu.com/a/b.jsp‘,
method: "GET",
data: { formdata },
header: { },
success: function (res) {
console.log("notice发送成功")
console.log(formdata)
that.setData({
responsedata: res.data
})
},
})
},
上面是我在notice中的例子。
——————————————————————————————————————————
小程序学习告一段落。
原文地址：https://www.cnblogs.com/qjqj0-0/p/11559480.html