黑马程序员官方文档：https://pan.baidu.com/s/1crZTQdIZ7OSDkZIpIWkhYw&pwd=1234
vant Weapp(类似element ui的组件库):https://youzan.github.io/vant-weapp【安装时路径不要出现中文名】
html(div、span、img、a)
wxml(view、text、image、navigator)
数据绑定
列表渲染
条件渲染
.class和#id
.element
并集选择器、后代选择器
::after和::before等伪类选择器
1.学习组件链接：#https://developers.weixin.qq.com/miniprogram/dev/component/（有基础很简单）
2.学习api链接：#https://developers.weixin.qq.com/miniprogram/dev/api/（ 主要分三大类API）
**特点：**以on开头，用来监听某些事件的触发
举例：wx.onWindowResize(function callback)监听窗口尺寸变化的事件
同步API
**特点：**以Sync结尾的API都是同步API、同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
举例：wx.setStorageSync(‘key’,‘value’)向本地存储写入内容
异步API
**特点：**类似于JQuery中的$.ajax(options)函数，需要通过success、fail、complete、接收调用结果
举例：wx.request发起网络数据请求，通过success回调函数接收数据
事件是渲染层到逻辑层的通讯方式，通过事件可以将用户在渲染层产生的行为，反馈到逻辑层业务的处理
| 类型 | 绑定方式 | 事件描述 |
|---|---|---|
| tap | bindtap或bind:tap | 手指触摸后马上离开，类似HTML中的click事件 |
| input | bindinput或bind:input | 文本框的输入事件 |
| change | bindchange或bind:change | 状态改变 |
| 属性 | 类型 | 说明 |
|---|---|---|
| type | String | 事件类型 |
| timeStamp | Integer | 页面打开触发事件所经历的毫秒数 |
| target | Object | 触发事件的组件的一些属性值集合（触发组件） |
| currentTarget | Object | 当前组件的一些属性值集合（实际响应组件） |
| detail | Object | 额外的信息 |
| touches | Array | 触摸事件，当前停留在屏幕中的触摸点信息的数组 |
| changedTouches | Array | 触摸事件，当前变化的触摸点信息的数组 |
<button bindtap="btnTapHandler"></button>
Page({
btnTapHandler(e){
console.log(e)
}
})
通过调用this.setData(object)方法，给页面data中的count数据重新赋值
changeCount(){
this.setData ({
count:this.data.count+1
})
}
<button bindtap="btnTapHandler" data-info="{{2}}"></button>
btnHandler(event){
//dataset是一个对象，包含了所有通过data-*传过来的参数项
console.log(event.target.dataset)
//通过dataset访问到具体值
console.log(event.target.dataset.info)
}
<input bindinput="inputHandler" />
Page({
inputHandler(e){
//e.detail.value最新的值
console.log(e.detail.value)
}
})
<input bindinput="inputHandler" value={{msg}} />
Page({
data:{
msg:''
},
inputHandler(e){
this.setData({
msg:e.detail.value)
}}
}
})
<view wx:if="{{condition}}"></view>
<view wx:if="{{type===1}}">男</view>
<view wx:elif="{{type===2}}">女</view>
<view wx:else>保密</view>
一次性控制多个组件的展示和隐藏
注：并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染
<block wx:if="{{true}}">
<view>view1</view>
<view>view2</view>
</block>
<view hidden="{{condition}}">条件为true隐藏，条件为false显示</view>
4.hidden和wx:if的区别
使用建议
<view wx:for="{{array}}">
索引是：{{index}},当前项是：{{item}}
</view>
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
索引是：{{idx}},当前项是：{{itemName}}
</view>
<view wx:for="{{array}}" wx:key="id">
索引是：{{idx}},当前项是：{{itemName}}
</view>
在iPhone6上，屏幕宽度为375px,共有750个物理像素，等分为750rpx,则：
@import "/common.wxss";
.moddle-p{
padding:15px;
}
小程序根目录下的app.json文件是全局配置的文件
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| navigationBarTitleText | String | 字符串 | 导航栏标题文字内容 |
| navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色 |
| navigationBarTextStyle | String | white | 导航栏标题颜色,仅支持black/white |
| backgroundColor | HexColor | #ffffff | 窗口的背景色 |
| backgroundTextStlye | String | dark | 下拉loading的样式，仅支持dark/light |
| enablePullDownRefresh | Boolean | false | 是否全局开启下拉刷新 |
| onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离，单位为px |
底部tabBar(注：只能配置最少2个、最多5个tab标签)
顶部tabBar(注：当渲染顶部tabBar时，不显示icon，只显示文本)
tabBar6个组成部分
tabBar配置项
| 属性 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| position | String | 否 | bottom | tabBar的位置，仅支持bottom/top |
| borderStyle | String | 否 | black | tabBar上边框的颜色，仅支持black/white |
| color | HexColor | 否 | tab上文字的默认(未选中)颜色 | |
| selectedColor | HexColor | 否 | tab上文字选中的颜色 | |
| backgroundColor | HexColor | 否 | tabBar的背景颜色 | |
| list | Array | 是 | tab页签的列表，最少2个，最多5个tab |
| 属性 | 类型 | 必填 | 描述 |
|---|---|---|---|
| pagePath | String | 是 | 页面路径，页面必须在pages中预先定义 |
| text | String | 是 | tab上显示的文字 |
| iconPath | String | 否 | 未选中时的图标路径；当position为top时，不显示icon |
| selectedIconPath | String | 否 | 选中时的图标路径；当position为top时，不显示icon |
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #000000 | 当前页面导航栏背景颜色 |
| navigationBarTextStyle | String | white | 当前页面导航栏标题颜色，仅支持black/white |
| navigationBarTitleText | String | 当前页面导航栏标题文字内容 | |
| backgroundColor | HexColor | #ffffff | 当前页面窗口的内景颜色 |
| backgroundTextStyle | String | dark | 当前页面下拉loading的样式，支持dark/light |
| enablePullDownRefresh | Boolean | false | 是否当前页面开启下拉刷新的效果 |
| onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离，单位为px |
wx.request({
url: 'https://www.escook.cn/api/get',
method:'GET',//这里换成POST即可
data:{
name:'zs',
age:20
},
success:(res)=>{
console.log(res)
}
跨域问题只存在于基于浏览器的web开发中，小程序的宿主环境不是浏览器，而是微信客户端，所以不存在跨域问题
ajax的技术核心依赖于浏览器中的XMLHttpRequest这个对象，所以在小程序中不能叫"发起Ajax请求"，而是叫做"发起网络数据请求"
声明式导航
编程式导航
(1)导航到tabBar页面
<navigator url="/pages/message/message" open-type="switchTab">
导航到消息页面
</navigator>
(2)导航到非tabBar页面
<navigator url="/pages/message/message" open-type="switchTab">
导航到非tabBar页面
</navigator>
(3)后退导航
<navigator open-type="navigateBack" delta='1'>
退回上一页
</navigator>
(1)导航到tabBar页面
调用wx.switchTab(Object object) 方法，就可以跳转到tarBar页面，其中Object参数对象的属性列表：
| 属性 | 类型 | 是否必选 | 说明 |
|---|---|---|---|
| url | string | 是 | 需要跳转的tabBar页面的路径，路径后不能带参数 |
| success | function | 否 | 接口调用成功的回调函数 |
| fail | function | 否 | 接口调用失败的回调函数 |
| complete | function | 否 | 接口调用结束的回调函数(成功和失败都要执行) |
<button bindtap="gotoMessage"></button>
gotoMessage(){
wx.switchTab({
url:'/pages/index/index'
})
}
(2)导航到非tabBar页面
<button bindtap="gotoInfo"></button>
gotoInfo(){
wx.navigateTo({
url:'/pages/info/info'
})
}
(3)后退导航
<button bindtap="gotoBack"></button>
gotoBack(){
wx.navigateBack({
//默认一层可以省略delta
delta:1
})
}
（1）声明式导航传参
<navigator url="/pages/message/message?name=zs&age=20" >
导航到tabBar页面
</navigator>
(2)编程式导航传参
<button bindtap="gotoInfo"></button>
gotoInfo(){
wx.navigateTo({
url:'/pages/info/info?name=zs&gender=男'
})
}
(3)在onLoad中接收导航参数
onLoad:function(options){
console.log(options)
}//接收者写的业务
(1)全局开启下拉刷新
(2)局部开启下拉刷新
(3)配置下拉刷新窗口的样式
(4)监听页面的下拉刷新事件
(5)停止下拉刷新效果
onPullDownRefresh() {
this.setData({
count:0
})
wx.stopPullDownRefresh()
},
(1)监听页面的上拉触底事件
onReachButton(){
console.log("已触发")
}//新版本不用onReachButton：function(){}
(2)配置上拉触低距离
(3)对上拉触底节流处理
应用生命周期
页面生命周期
页面的生命周期范围较小，应用程序的生命周期范围较大
应用生命周期函数
需要在app.js中声明
| 生命周期函数 | 说明 |
|---|---|
| onLaunch | 小程序初始化完成时触发，全局只触发一次 |
| onShow | 小程序启动，或从后台进入前台显示时触发 |
| onHide | 小程序从前台进入后台时触发 |
| onError | 小程序发生脚本错误或 API 调用报错时触发 |
| onPageNotFound | 小程序要打开的页面不存在时触发 |
| onUnhandledRejection() | 小程序有未处理的 Promise 拒绝时触发 |
| onThemeChange | 系统切换主题时触发 |
页面生命周期函数
需要在页面的.js中声明
| 生命周期函数 | 说明 | 作用 |
|---|---|---|
| onLoad | 监听页面加载，一个页面只调用1次 | 发送请求获取数据 |
| onShow | 监听页面显示 | 请求数据 |
| onReady | 监听页面初次渲染完成，一个页面只调用1次 | 获取页面元素（少用） |
| onHide | 监听页面隐藏 | 终止任务，如定时器或者播放音乐 |
| onUnload | 监听页面卸载，一个页面只调用1次 | 终止任务 |
页面的生命周期范围较小，应用程序的生命周期范围较大
WXS是小程序独有的一套脚本语言，结合wxml，可以构建出页面的结构。
wxml中无法调用在页面.js中定义的函数，但是wxml中可以调用wxs中定义的函数。
3.wxs基础语法
wxml文件中的每个标签，必须提供module属性，用来指定当前wxs的模块名称，方便在wxml中访问模块中的成员
内嵌式wxs脚本
<view> {{m1.toUpper(username)}}</view>
<wxs module="m1">
module.exports.toUpper=function(str){
return str.toUpperCase()
}
</wxs>
外联式wxs脚本
<!--调用m2模块的方法-->
<view>{{m2.toLower(country)}}</view>
<!--引入外联式文件，命名为m2-->
<wxs src="../../utils/tools.wxs" module="m2"></wxs>
//tools.wxs文件
function toLower(str){
return str.toLowerCase()
}
module.exports={
toLower:toLower
}
与javascript不同
不能作为组件的事件回调
隔离性
性能好
*****案例有用小知识：
1.判断是否有还有下一页数据 ：页码值*每页显示多少条数据>=总数据条数
2.好像新版没有conplete:()=>{}了，可以在数据请求成功后面写 wx.hideLoading()、wx.stopPullDownRefresh()
在页面中的.json全局配置文件中引用组件的方式，叫做"局部引用"
默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题，但有时，我们希望在外界能够控制组件内部的样式，此时可以通过styleIsolation修改组件的样式的隔离选项
//在组件的.js文件中新增如下配置
Component({
options:{
styleIsolation:'isolated'
}
})
//或在组件的.json文件中新增如下配置
{
"styleIsolation":"isolated"
}
| 可选值 | 默认值 | 描述 |
|---|---|---|
| isolated | 是 | 表示启用样式隔离，在定义组件内外，使用class指定的样式将不会相互影响 |
| apply-shared | 否 | 表示页面wxss样式将影响到自定义组件，但自定义wxss中指定的样式不会影响页面 |
| shared | 否 | 表示页面wxss样式将影响自定义组件，自定义组件wxss中指定的样式也会影响页面和其他设置了apply-shared或shared的自定义组件 |
数据：data 【倾向存储私有数据】
方法：methods 【和vue相似】
属性：properties【倾向存储外界传递到组件的数据】
是组件的对外属性，用来接收外界传递到组件的数据
与data数据本质上没有区别，可以渲染页面
Component({
//属性定义
properties:{
、//完整定义属性的方式
max:{
type:Number, //属性值得数据类型
value:10 //属性默认值
}
//简化定义属性的方式【不需指定属性默认值时，可以使用简化方式】
max:Number
}
})
<my-test1 max="10"></my-test1>
监听器用于监听和响应任何属性和数据字段的变化，从而执行特点的操作，作用类似于vue中的watch监听器
Component({
data:{n1:0,n2:0,sum:0},
methods:{
addN1(){this.setData({n1:this.data.n1+1})},
addN2(){this.setData({n2:this.data.n2+1})},
}
observers:{
'n1,n2':function(n1,n2){//监听n1和n2的变化
this.setData({sum:n1+n2})
}
}
})
数据监听器支持监听对象中单个或多个属性的变化、
Component({
observers:{
'对象.属性A,对象.属性B':function(属性A的新值,属性B的新值){//监听A和B的变化
//触发监听的3种情况
【为属性A赋值】 使用setData设置this.data.对象.属性A时触发
【为属性B赋值】 使用setData设置this.data.对象.属性B时触发
【直接为对象赋值】 使用setData设置this.data.对象时触发
}
}
})
如果监听对象的属性太多了，可以使用通配符**来监听对象中所有属性的变化
Component({
observers:{
'对象.**':function(obj){//监听A和B的变化
fullColor:`${obj.r},${obj.g},${obj.b}`
}
}
})
纯数据字段指的是那些不用于界面渲染的data字段
某些data中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用
提高渲染的性能
使用规则
Component({
options:{
//pureDataPattern为正则表达式
pureDataPattern:/^_/
},
data：{
a:true,//普通数据字段
_b:true//纯数据字段
}
})
| 生命周期函数 | 参数 | 描述说明 |
|---|---|---|
| created | 无 | 在组件实例刚刚被创建时执行 |
| attached | 无 | 在组件实例进入页面节点树时执行 |
| ready | 无 | 在组件在视图层布局完成后执行 |
| moved | 无 | 在组件实例被移动到节点树另一个位置时执行 |
| datached | 无 | 在组件实例被从页面节点移除时执行 |
| error | object Error | 每当组件方法抛出错误时执行 |
组件实例刚被创建好的时候，created生命周期函数会被触发
在组件完全初始化完毕、进入页面节点树后，attached生命周期函数会被触发
在组件离开页面节点树后，detached生命周期函数会被触发
lifetimes节点
Component({
lifetimes:{
attached(){},
detached(){}
}
})
| 生命周期函数 | 参数 | 描述 |
|---|---|---|
| show | 无 | 组件所在的页面被展示时执行 |
| hide | 无 | 组件所在的页面被隐藏时执行 |
| resize | Object Size | 组件所在的页面尺寸变化时执行 |
Component({
pageLifetimes:{
show:function(){},
hide:function(){},
resize:function(){}
}
})
单个插槽
只允许使用一个进行占位
//组建的封装者
<view >
<view>这里是组件的内容节点</view>
<slot></slot>
</view>
//组建的使用者
<test1 >
<view>这里是slot的内容</view>
</test1>
多个插槽
Component({
options:{
multipleSlots:true//启动多个插槽
},
properties:{},
methods:{}
})
//组件的封装者
<view>
<slot name="before"></slot>
<view>这里是组件的内容节点</view>
<slot class="after"></slot>
</view>
//组建的使用者
<test1 >
<view slot="before">这里是before的slot的内容</view>
<view slot="after">这里是after的slot的内容</view>
</test1>
父子组件之间的3种通信方式
属性绑定
用于父组件向子组件得指定属性设置数据，仅能设置JSON兼容的数据
只能传递普通类型的数据，无法将方法传递给子组件
//父组件.js
data:{
count:0
}
<test1 count="{{count}}">父组件的wxml</test1>
//子组件的.js文件
properties：{
count:Number
}
<view>{{count}}子组件得wxml</view>
事件绑定
用于子组件向父组件传递数据，可以传递任意数据
步骤一：
//在父组件中定义syncCount方法
syncCount(){
console.log("父组件的内容")
}
步骤二
<!--在父组件的wxml中，定义自定义事件的形式-->
<!--第一种推荐使用,结构清晰-->
<test1 bind:sync="syncCount"></test>
<test1 bindsync="syncCount"></test>
步骤三
//子组件的js代码
methods：{
//triggerEnvent('自定义事件名称',{/*参数对象*/})
this.triggerEnvent('sync',{value:this.properties.count})
}
步骤四
//在父组件的js中
//在父组件中定义syncCount方法
syncCount(){
//console.log("父组件的内容")
this.setData({
count:e.detail.value
})
}
获取组件实例
//这些都在父组件的页面里面写的
//test子组件组件
<test class="customA" id="cA"></test>
<button bintap="getChild">获取子组件实例</botton>
getChild(){
const child=this.selectComponent('.customA')//可以传递id选择器#cA,但是不能提供标签选择器如my-test3
child.setData({count:child.properties.count+1})//调用子组件得setData
child.addCount()//调用子组件得方法
}
behaviors
//需要创建一个新的文件夹
module.exports=Behavior({
//属性节点
properties:{},
//私有数据节点
data:{username:'zs'},
//事件处理函数和自定义方法节点
methods:{},
//其他节点
})
//导入并使用Behavior
const myBehavior=require("../../Behavior/xxxx")
Component({
//将导入的Behavior实例对象，挂载到behaviors数组节点中，即可生效
behaviors:[myBehavior]
//其他节点
})
<test1>{{username}}</test>
| 可用的节点 | 类型 | 是否必填 | 描述 |
|---|---|---|---|
| properties | Object Map | 否 | 同组件的属性 |
| data | Object | 否 | 同组件的数据 |
| methods | Object | 否 | 同自定义组件的方法 |
| behaviors | String Array | 否 | 引入其他的behavior |
| created | Function | 否 | 生命周期函数 |
| attached | Function | 否 | 生命周期函数 |
| ready | Function | 否 | 生命周期函数 |
| moved | Function | 否 | 生命周期函数 |
| detached | Function | 否 | 生命周期函数 |
import {promisifyAll} from 'miniprogram-api-promise'
const wxp=wx.p={}
promisifyAll(wx,wxp)
<van-button type="danger" bindtap="getInfo">按钮</van-button>
asyn getInfo(){
const {data:res}=await wx.p.request({
methods:'GET',
url:'',
data:{name:'zs',age:'20'}
})
}
npm i --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
//在这个js文件中，专门来创建Store的实例对象
import {action, observable} from 'mobx-miniprogram'
export const store=observable({
//数据字段
numA:1,
numB:2,
//计算属性
get sum(){
return this.numA+this.numB
},
//actions方法，用来修改store中的数据
updateNumA1:action(function(step){
this.numA+=step
})
})
//页面的.js文件
import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
Page({
onLoad(options) {
this.storeBindings=createStoreBindings(this,{
store,
fields:['numA','numB','sum'],
actions:['updateNum1']
})
},
onUnload() {
this.storeBindings.detroyStoreBindings()
}
})
<view>{{numA}}+{{numB}}={{sum}}</view>
<van-button type="primary" bindtap="btnHandler" data-step="{{1}}">numA+1</van-button>
<van-button type="danger" bindtap="btnHandler" data-step="{{-1}}">numA-1</van-button>
btnHandler(e){
this.updateNumA1(e.target.dataset.step)
},
import { action } from 'mobx-miniprogram'
import { storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
// component/test/test.js
Component({
behaviors:[storeBindingsBehavior],
storeBindings:{
store,
fields:[
{
numA:()=>store.numA,//第一种写法
numB:(store)=>store.numB,//第二种写法
sum:'sum'//第三种写法
}
],
actions:{
updateNum2:'updateNum2'
}
}
})
7.在组件中使用store中的成员
<view>{{numA}}+{{numB}}={{sum}}</view>
<van-button type="primary" bindtap="btnHandler" data-step="{{1}}">numA+1</van-button>
<van-button type="danger" bindtap="btnHandler" data-step="{{-1}}">numA-1</van-button>
methods:{
btnHandler(e){
this.updateNumA2(e.target.dataset.step)
},
}
//在app.js
"subPackages": [
{
"root": "pkgA",
"name": "p1",
"pages":[
"pages/cat/cat"
]
}
],
与普通分包的区别
引用原则
"preloadRule": {
"pages/message/message":{
"packages": ["p1"],
"network": "all"//使用几G网络
}
}
案例文档：https://applet-base-api-t.itheima.net/docs-uni-shop/index.htm#
gitee源码：https://search.gitee.com/?skin=rec&type=repository&q=uni-shop2刘龙彬
接口地址：https://www.showdoc.com.cn/128719739414963/2513235043485226(或https://www.aliyundrive.com/s/7srGJUnkfKR密:9v4b)
第一个问题：
第二问题：拿不到token，要自己模拟，然后我放弃了
总结：受后端的限制，下次爬也要写一个后端真受不了了，从登录开始就没怎么写，因为token的限制，搞了个失败品，留到毕设（说不定那天用到了呢），不过敲这种还蛮有意思，越敲越接近生活的东西了
`