一、小程序开放功能
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的自定义组件。（这个选项在插件中不可用。）
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
