一、小程序开放功能
1.获取网络状态wx.getNetworkType
2.从网络上下载文档wx.downloadFile
3.下载成功之后进行预览文档wx.openDocument
Page({
// 点击“预览文档”的按钮,触发tap回调
tap: function() {
wx.getNetworkType({
success: function(res) {
// networkType字段的有效值:
// wifi/2g/3g/4g/unknown(Android下不常见的网络类型)/none(无网络)
if (res.networkType == 'wifi') {
// 从网络上下载文档
wx.downloadFile({
url:' 网络下载地址 ',
success: function (res) {
// 下载成功之后进行预览文档
wx.openDocument({
filePath: res.tempFilePath
})
}
})
} else {
wx.showToast({ title: '当前为非Wifi环境' })
}
}
})
}
})
4.扫码能力wx.scanCode
tapScan(){
wx.scanCode({
onlyFromCamera: false, //不仅使用相机也可以使用相册打开文件
success(res){
console.log(res);
}
})
},
5.获取微信用户信息
(1)不推荐使用getUserInfo获取用户信息,预计自2021年4月13日起,getUserInfo将不再弹出弹窗,并直接返回匿名的用户个人信息
(2)wx.getUserProfile:获取用户信息。每次请求都会弹出授权窗口,用户同意后返回 userInfo
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
canIUseGetUserProfile: false,
canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
//canIUseOpenData:false//进入时请求授权获取用户信息
},
})
6.分享给朋友js中的onShareAppMessage(){}
onShareAppMessage() {
const promise = new Promise(resolve => {
setTimeout(() => {
resolve({
title: '自定义转发标题'
})
}, 2000)
})
return {
title:'震惊!!!!',
imageUrl:'https://scpic.chinaz.net/files/pic/pic9/202009/apic27858.jpg',
promise//如果该参数存在,则以 resolve 结果为准,如果三秒内不 resolve,分享会使用上面传入的默认参数
}
}
7.分享到朋友圈onShareTimeline(){ }
onShareTimeline(){
return {
title:'!!!!!!!!',
imageUrl:'https://scpic.chinaz.net/files/pic/pic9/202009/apic27858.jpg',
}
}
单页模式
用户在朋友圈打开分享的小程序页面,并不会真正打开小程序,而是进入一个“小程序单页模式”的页面,“单页模式”有以下特点:
“单页模式”下,页面顶部固定有导航栏,标题显示为当前页面 JSON 配置的标题。底部固定有操作栏,点击操作栏的“前往小程序”可打开小程序的当前页面。顶部导航栏与底部操作栏均不支持自定义样式。
“单页模式”默认运行的是小程序页面内容,但由于页面固定有顶部导航栏与底部操作栏,很可能会影响小程序页面的布局。因此,请开发者特别注意适配“单页模式”的页面交互,以实现流畅完整的交互体验。
“单页模式”下,一些组件或接口存在一定限制,详情见下文单页模式下的限制章节
二、小程序中的自定义组件
新建components文件夹
1.新建文件夹生成component
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
2.在要使用的文件的json文件中加入
{
"usingComponents": {
"组件名":"组件路径"
}
}
3.slot插槽的使用
(1)在组件内直接写的文本会放到默认插槽中
(2)默认情况下,一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时,可以在组件 js 中声明启用。
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多 slot 支持
},
properties: { /* ... */ },
methods: { /* ... */ }
})
//组件中
<slot name="before"></slot>
<view>这里是组件的内部细节</view>
<slot name="after"></slot>
//使用的地方
<son1>这是放到默认插槽的文本
<!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
<view slot="before">这里是插入到组件slot name="before"中的内容</view>
<!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
<view slot="after">这里是插入到组件slot name="after"中的内容</view>
</son1>
4.组件的传参
(1)父传子:在父组件中使用的子组件标签上加自定义属性,在子组件中通过properties去接受,然后就可以再子组件中使用
//父组件
<son1 canshu='kaixuan'>这是放到默认插槽的文本
<!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
<view slot="before">这里是插入到组件slot name="before"中的内容</view>
<!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
<view slot="after">这里是插入到组件slot name="after"中的内容</view>
</son1>
//子组件js
properties: {
canshu:{
type:[Number,String],
value:'默认值'
}
},
//子组件wxml
<view style="color: red;"> 父传子 {{canshu}}</view>
(2)子传父:给子组件绑定一个方法,把给方法写到子组件js的methods中,通过this.triggerEvent来传递参数,再在父组件中用bind:给子组件标签绑定一个自定义事件,事件类型与子组件中的保持一致,事件名随便写,然后在父组件的对应事件中即可拿到并改变父组件的值从而使用
给子组件绑定一个方法,把给方法写到子组件js的methods中,通过this.triggerEvent来传递参数
methods: {
//子传父
toFather(){
this.triggerEvent('myevent','子传父的数据')
},
}
再在父组件中用bind:给子组件标签绑定一个自定义事件,事件类型与子组件中的保持一致,事件名随便写
<son1 bind:myevent='myevent'>这是放到默认插槽的文本
<!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
<view slot="before">这里是插入到组件slot name="before"中的内容</view>
<!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
<view slot="after">这里是插入到组件slot name="after"中的内容</view>
</son1>
然后在父组件的对应事件中即可拿到并改变父组件的值从而使用
//获取子传父的值
myevent(res){
console.log(res);
this.setData({
fromSon:res.detail
})
},
// 在父组件中使用
<view>{{fromSon}}</view>
5.组件的生命周期
lifetimes: {
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
},
// 以下是旧式的定义方式,可以保持对 <2.2.3 版本基础库的兼容
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
6. Behaviors 注册一个 behavior,接受一个 Object 类型的参数
module.exports = Behavior({
created(){
console.log(1111);
},
})
在要使用的组件的js中引入
import Behavior from "../../behavior/behavior"
Component({
behaviors:[Behavior],
...
})
注意,生命周期都会走,但是如果混入和组件内的数据重名,下面的会覆盖上面的
同名字段的覆盖和组合规则
组件和它引用的 behavior
中可以包含同名的字段,对这些字段的处理方法如下:
- 如果有同名的属性 (properties) 或方法 (methods):
- 若组件本身有这个属性或方法,则组件的属性或方法会覆盖
behavior
中的同名属性或方法;
- 若组件本身无这个属性或方法,则在组件的
behaviors
字段中定义靠后的 behavior
的属性或方法会覆盖靠前的同名属性或方法;
- 在 2 的基础上,若存在嵌套引用
behavior
的情况,则规则为:引用者 behavior
覆盖 被引用的 behavior
中的同名属性或方法。
- 如果有同名的数据字段 (data):
- 若同名的数据字段都是对象类型,会进行对象合并;
- 其余情况会进行数据覆盖,覆盖规则为:
引用者 behavior
> 被引用的 behavior
、 靠后的 behavior
> 靠前的 behavior
。(优先级高的覆盖优先级低的,最大的为优先级最高)
- 生命周期函数和 observers 不会相互覆盖,而是在对应触发时机被逐个调用:
- 对于不同的生命周期函数之间,遵循组件生命周期函数的执行顺序;
- 对于同种生命周期函数和同字段 observers ,遵循如下规则:
-
behavior
优先于组件执行;
-
被引用的 behavior
优先于 引用者 behavior
执行;
-
靠前的 behavior
优先于 靠后的 behavior
执行;
- 如果同一个
behavior
被一个组件多次引用,它定义的生命周期函数和 observers 不会重复执行。
组件样式隔离
默认情况下,自定义组件的样式只受到自定义组件 wxss 的影响。除非以下两种情况:
-
app.wxss
或页面的 wxss
中使用了标签名选择器(或一些其他特殊选择器)来直接指定样式,这些选择器会影响到页面和全部组件。通常情况下这是不推荐的做法。
- 指定特殊的样式隔离选项
styleIsolation
。
styleIsolation
选项从基础库版本 2.6.5 开始支持。它支持以下取值:
-
isolated
表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(一般情况下的默认值);
-
apply-shared
表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面;
-
shared
表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared
或 shared
的自定义组件。(这个选项在插件中不可用。)