一、小程序开放功能
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 的自定义组件。（这个选项在插件中不可用。）