700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 微信小程序03---开放能力的使用 发布和分享 组件化

微信小程序03---开放能力的使用 发布和分享 组件化

时间:2023-11-24 16:47:38

相关推荐

微信小程序03---开放能力的使用 发布和分享 组件化

目录

一、小程序的开放能力

1、获取网络状态

获取网络类型:wx.getNetworkType({})

从网上下载文件:wx.downloadFile({})

下载成功之后预览文档:wx.openDocument({})

2、扫码能力wx.scanCode({})

3、获取当前微信用户信息

二、小程序分享

1、发送给朋友

2、分享至朋友圈

三、自定义组件

1、Component

组件定义

组件样式隔离

2、Behavior

组件中使用

同名字段的覆盖和组合规则

一些其他

一、小程序的开放能力

1、获取网络状态

手机连接到互联网有几种方式:Wifi、2G、3G、4G、5G,每种方式的上传速度和下载速度差异很大,它们的计费方式的差异也导致用户在使用互联网服务的时候有不同的使用习惯。对于视频播放这种比较费流量的应用,也需要进行一些限制,如果用户不是WIFI状态,需要给用户一些提示。

获取网络类型:wx.getNetworkType({})

从网上下载文件:wx.downloadFile({})

下载成功之后预览文档:wx.openDocument({})

一般和上一个函数一起使用

案例:

// 获取用户网络状态 & 下载文档 & 下载之后预览文档open() {// 获取用户当前网络状态wx.getNetworkType({success: (res) => {console.log(res);if (workType != 'wifi') {wx.showModal({title: '当前非wifi模式,是否继续?',success: (res) => {if (res.confirm) {// 下载文档wx.downloadFile({url: 'https://lark-temp.oss-cn-/__temp/0/docx/95836198_-10-05%%3A04%3A16.docx?OSSAccessKeyId=LTAI4GKnqTWmz2X8mzA1Sjbv&Expires=1666248306&Signature=Eku2TF4fERM%2BUjLyZnTv97FV0vA%3D',success: (res) => {console.log(res);// 下载成功之后预览文档wx.openDocument({filePath: res.tempFilePath,})},})}}})} else {wx.downloadFile({url: 'https://lark-temp.oss-cn-/__temp/0/docx/95836198_-10-05%%3A04%3A16.docx?OSSAccessKeyId=LTAI4GKnqTWmz2X8mzA1Sjbv&Expires=1666248306&Signature=Eku2TF4fERM%2BUjLyZnTv97FV0vA%3D',success: (res) => {console.log(res);// 下载成功之后预览文档wx.openDocument({filePath: res.tempFilePath,})},})}}})},

更多详情请看官方文档

2、扫码能力wx.scanCode({})

为了让用户减少输入,我们可以把复杂的信息编码成一个二维码,利用宿主环境wx.scanCode这个API调起微信扫一扫,用户扫码之后,wx.scanCode的success回调会收到这个二维码所对应的字符串信息。

wx.scanCode({})

案例:

// 扫一扫功能scan() {wx.scanCode({// 是否能够在相册中选取图片onlyFromCamera: true,// 扫描成功的回调函数success: (res) => {console.log(res.result);if (res.result) {wx.showModal({title: res.result,})}}})},

3、获取当前微信用户信息

获取用户信息(两种)

getUserProfile(支持使用,能够请求到真实的用户信息)

获取用户信息。页面产生点击事件(例如buttonbindtap的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回userInfo。该接口用于替换wx.getUserInfo

getUserInfo(不支持使用,现在只能请求到匿名的用户信息)

(新建项目时index界面可以看到一些他的应用)

微信中还提供了很多开发的API,有一些涉及到了用户隐私的获取,关于这些API的调用,就需要通过button按钮在界面上显式的声明这些操作,比如获取用户信息。

open-data

用于展示微信开放的数据。(小程序插件中不能使用。)

<open-data type="groupName" open-gid="xxxxxx"></open-data>

<open-data type="userAvatarUrl"></open-data>

<open-data type="userGender" lang="zh_CN"></open-data>

wx.canIUse()

判断小程序的API,回调,参数,组件等是否在当前版本可用。返回值为布尔类型。

// 组件的属性

wx.canIUse('text.selectable')

wx.canIUse('button.open-type.contact')

// 对象的属性或方法

wx.canIUse('console.log')

wx.canIUse('Image.src')

// wx接口参数、回调或者返回值

wx.canIUse('showToast.object.image')

wx.canIUse('request.object.method.GET')

wx.getUserProfile

获取用户信息。每次请求都会弹出授权窗口,用户同意后返回userInfo。

二、小程序分享

1、发送给朋友

小程序界面分享配置

可将小程序页面分享到朋友圈。适用于内容型页面的分享,不适用于有较多交互的页面分享。

小程序页面默认不可被分享到朋友圈,开发者需主动设置“分享到朋友圈”。页面允许被分享到朋友圈,需满足两个条件:

首先,页面需设置允许“发送给朋友”。具体参考Page.onShareAppMessage接口文档

满足条件 1 后,页面需设置允许“分享到朋友圈”,同时可自定义标题、分享图等。具体参考Page.onShareTimeline接口文档

满足上述两个条件的页面,可被分享到朋友圈。

单页模式

用户在朋友圈打开分享的小程序页面,并不会真正打开小程序,而是进入一个“小程序单页模式”的页面,“单页模式”有以下特点:

“单页模式”下,页面顶部固定有导航栏,标题显示为当前页面 JSON 配置的标题。底部固定有操作栏,点击操作栏的“前往小程序”可打开小程序的当前页面。顶部导航栏与底部操作栏均不支持自定义样式。

“单页模式”默认运行的是小程序页面内容,但由于页面固定有顶部导航栏与底部操作栏,很可能会影响小程序页面的布局。因此,请开发者特别注意适配“单页模式”的页面交互,以实现流畅完整的交互体验。

“单页模式”下,一些组件或接口存在一定限制,详情见下文单页模式下的限制章节

onShareAppMessage() {return {title: '震惊!18岁花季少女8年前竟10岁!', //分享的标题imageUrl: './th/id/R-C.489627550fd51d03011d5c84a422d64b?rik=KMVlvdpxNDy2HQ&riu=http%3a%2f%%2flarge%2f9150e4e5ly1fe8lgr88xbj20gs0hs0w8.jpg&ehk=JXhCCjYOiRvjLbcSvtzoC80uvsQDYi2XB50tlQlw6A4%3d&risl=&pid=ImgRaw&r=0', //分享的封面,默认为当前页面的截图path: '../logs/logs', //默认的跳转路径}},

2、分享至朋友圈

在Page构造函数中添加onShareAppMessage这个函数就可以在顶部菜单栏里生成分享按钮

// 分享到朋友圈onShareTimeline() {return {title: '震惊!18岁花季少女8年前竟10岁!', //分享的标题imageUrl: './th/id/R-C.489627550fd51d03011d5c84a422d64b?rik=KMVlvdpxNDy2HQ&riu=http%3a%2f%%2flarge%2f9150e4e5ly1fe8lgr88xbj20gs0hs0w8.jpg&ehk=JXhCCjYOiRvjLbcSvtzoC80uvsQDYi2XB50tlQlw6A4%3d&risl=&pid=ImgRaw&r=0', //分享的封面,默认为当前页面的截图path: '../logs/logs', //默认的跳转路径}}

可以设置button 的open-type为share,这样我们就可以页面中添加分享按钮

三、自定义组件

1、Component

组件定义

①创建组件

构造器使用时要现在根目录创建一个Components文件夹,在该文件夹下创建一个自定义组件文件夹

在创建的自定义组件文件夹的json中配置component:true

②引入组件

在父组件的json文件中引入要是用的组件

③普通插槽

子组件:

<view><view>我是第一个son组件</view><slot></slot></view>

父组件:

<son1></son1>

④命名插槽

子组件:

<view><slotname="head"></slot><view>我是第一个son组件</view><slotname="foot"></slot></view>

父组件:

<view><son1><viewslot="head">我是名叫头部的具名插槽</view><viewslot="foot">我是名叫底部的具名插槽</view></son1></view>

⑤父子间传值

父子间传值的方法与vue中传值的方法相似,就不过多赘述了

子组件:this.triggerEvent('getMsg', '我是传递的信息')

<view><slotname="head"></slot><viewclass="blue">我是第一个son组件</view><slot></slot><slotname="foot"></slot>{{nameFather}}<buttonbindtap="toFather"class="red">点我传值</button></view>接收从父组件中传过来的值properties:{nameFather:String,},methods:{//向父组件传值toFather(){this.triggerEvent('getMsg','我是传递的信息')}}

父组件:

<!--pages/open/open.wxml--><viewclass="container"><view>1、引入一个自定义组件</view><son1></son1><view>2、默认插槽</view><son1>我是默认插槽</son1><viewclass="blue">3、具名插槽</view><son1><viewslot="head">我是名叫头部的具名插槽</view>默认插槽<viewslot="foot">我是名叫底部的具名插槽</view></son1><view>4、父传子</view><son1nameFather="stupidGirl"></son1><view>5、子传父</view><son1bind:getMsg='getMsg'></son1>{{msg}}</view><son2></son2>//子传父,接收从子组件中传过来的值getMsg(e){console.log(e.detail);this.setData({msg:e.detail})},

组件样式隔离

在自定义组件中 options 属性定义样式隔离:

/*

isolated表示启用样式隔离,在自定义组件内外,使用class指定的样式将不会相互影响(一般情况下的默认值);

apply-shared表示页面wxss样式将影响到自定义组件,但自定义组件wxss中指定的样式不会影响页面;

shared表示页面wxss样式将影响到自定义组件,自定义组件wxss中指定的样式也会影响页面和其他设置了apply-shared或shared的自定义组件。(这个选项在插件中不可用。)

*/

Component({//样式隔离options:{styleIsolation:'apply-shared'},})

2、Behavior

behaviors是用于组件间代码共享的特性,类似于一些编程语言中的 “mixins” 或 “traits”。

每个behavior可以包含一组属性、数据、生命周期函数和方法。组件引用它时,它的属性、数据和方法会被合并到组件中,生命周期函数也会在对应时机被调用。每个组件可以引用多个behaviorbehavior也可以引用其它behavior

详细的参数含义和使用请参考Behavior 参考文档。

组件中使用

组件引用时,在behaviors定义段中将它们逐个列出即可。

同名字段的覆盖和组合规则

组件和它引用的behavior中可以包含同名的字段,对这些字段的处理方法如下:

如果有同名的属性 (properties) 或方法 (methods): 若组件本身有这个属性或方法,则组件的属性或方法会覆盖behavior中的同名属性或方法;若组件本身无这个属性或方法,则在组件的behaviors字段中定义靠后的behavior的属性或方法会覆盖靠前的同名属性或方法;在 2 的基础上,若存在嵌套引用behavior的情况,则规则为:引用者 behavior覆盖被引用的 behavior中的同名属性或方法。如果有同名的数据字段 (data): 若同名的数据字段都是对象类型,会进行对象合并;其余情况会进行数据覆盖,覆盖规则为:引用者 behavior>被引用的 behavior靠后的 behavior>靠前的 behavior。(优先级高的覆盖优先级低的,最大的为优先级最高)生命周期函数和 observers 不会相互覆盖,而是在对应触发时机被逐个调用: 对于不同的生命周期函数之间,遵循组件生命周期函数的执行顺序;对于同种生命周期函数和同字段 observers ,遵循如下规则:behavior优先于组件执行;被引用的 behavior优先于引用者 behavior执行;靠前的 behavior优先于靠后的 behavior执行;如果同一个behavior被一个组件多次引用,它定义的生命周期函数和 observers 不会重复执行。

module.exports = Behavior({behaviors: [],properties: {myBehaviorProperty: {type: String}},data: {myBehaviorData: {}},attached: function(){},methods: {myBehaviorMethod: function(){}}})

一些其他

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。