目录

一、小程序的开放能力

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 (res.networkType != 'wifi') {wx.showModal({title: '当前非wifi模式，是否继续？',success: (res) => {if (res.confirm) {// 下载文档wx.downloadFile({url: 'https://lark-temp.oss-cn-hangzhou.aliyuncs.com/__temp/0/docx/95836198_2022-10-05%2010%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-hangzhou.aliyuncs.com/__temp/0/docx/95836198_2022-10-05%2010%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（支持使用，能够请求到真实的用户信息）

获取用户信息。页面产生点击事件（例如 button 上 bindtap 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回 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: 'https://ts1.cn.mm.bing.net/th/id/R-C.489627550fd51d03011d5c84a422d64b?rik=KMVlvdpxNDy2HQ&riu=http%3a%2f%2fww4.sinaimg.cn%2flarge%2f9150e4e5ly1fe8lgr88xbj20gs0hs0w8.jpg&ehk=JXhCCjYOiRvjLbcSvtzoC80uvsQDYi2XB50tlQlw6A4%3d&risl=&pid=ImgRaw&r=0', //分享的封面，默认为当前页面的截图path: '../logs/logs', //默认的跳转路径}},

2、分享至朋友圈

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

// 分享到朋友圈onShareTimeline() {return {title: '震惊！18岁花季少女8年前竟10岁！', //分享的标题imageUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.489627550fd51d03011d5c84a422d64b?rik=KMVlvdpxNDy2HQ&riu=http%3a%2f%2fww4.sinaimg.cn%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><slot name="head"></slot><view>我是第一个son组件</view><slot name="foot"></slot></view>

父组件：

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

⑤父子间传值

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

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

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

父组件：

<!--pages/open/open.wxml--><view class="container"><view>1、引入一个自定义组件</view><son1></son1> <view>2、默认插槽</view><son1>我是默认插槽</son1><view class="blue">3、具名插槽</view><son1><view slot="head">我是名叫头部的具名插槽</view>默认插槽<view slot="foot">我是名叫底部的具名插槽</view></son1><view>4、父传子</view><son1 nameFather="stupidGirl"></son1><view>5、子传父</view><son1 bind: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 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。 每个组件可以引用多个 behavior ，behavior 也可以引用其它 behavior 。

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

组件中使用

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

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

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

  • 如果有同名的属性 (properties) 或方法 (methods)：

    1. 若组件本身有这个属性或方法，则组件的属性或方法会覆盖 behavior 中的同名属性或方法；
    2. 若组件本身无这个属性或方法，则在组件的 behaviors 字段中定义靠后的 behavior 的属性或方法会覆盖靠前的同名属性或方法；
    3. 在 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(){}}
})

一些其他

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

  1. 微信小程序：实现计算器-Demo+与发布（编程运算计算器）

    微信小程序:实现计算器-Demo+与发布(编程运算计算器(可以微信小程序直接搜索)) 基本运算符与逻辑运算符,任意进制转换,上不封顶 微信小程序源代码下载:资源下载 使用了JS进制转换接口:JS实现万 ...

  2. 微信小程序插件新增能力

    微信小程序开发交流qq群   173683895    承接微信小程序开发.扫码加微信. 正文: " 小程序插件能力升级:开放插件登录能力,帮助插件开发者更好地管理用户:支持在插件内使用微信 ...

  3. 百度小程序和微信小程序，开放与封闭之争

    尽管小程序有着"连接万物"."用完即走"等理念的加持,本质上却是基于超级App的免手机本地安装的"类App"或"mini App& ...

  4. 微信小程序直接上传文件到阿里云OSS组件封装

    微信小程序直接上传文件到OSS 1. 封装公共方法 在根目录utils目录新建一个upload文件夹: // utils/upload/base64.jsvar base64EncodeChars = ...

  5. 项目上线，部署到服务器（腾讯服务器），http协议及https协议（微信小程序必须https协议才可发布）、Nginx配置

    一.准备服务器: 1.选择自己的服务器,这里有很多服务器比如,阿里服务器,腾讯服务器等,这里我选择腾讯服务器做测试,其官网:https://cloud.tencent.com/,微信扫码登录后如下进入 ...

  6. 微信小程序 基础1【本页面窗口配置、组件、布局】

    视频地址: https://www.bilibili.com/video/BV1cW411T7t6  [2018]学做小程序- 清华大学 https://www.bilibili.com/video/ ...

  7. 微信小程序基于最新版1.0开发者工具分享－小试牛刀(视频) 发布流程

    第一章:小程序初级入门教程 小试牛刀[含视频] 视频地址:https://v.qq.com/x/page/i0554akzobq.html 这一章节中,我们尝试着写一个最简单的例子,包含 2 个静态页 ...

  8. SpringBoot微信小程序商城（前台+后台）源码分享

    淘源码:国内专业的免费源码下载平台 需要源码学习可私信我. 小程序商城源代码介绍: 系统由:Spring Boot后端API,web管理后台 和 微信小程序用户前端 这3部组成. 技术栈:java S ...

  9. 微信小程序开发 | 02 - 轮播图实现（swiper组件）

    一.实现思路 轮播图基于微信小程序提供的swiper组件(文档)实现. swiper组件中使用到下列属性: display-multiple-items:同时显示的滑块数量 current:当前所在滑 ...

最新文章

  1. 20个精美图表，教你玩转 Pyecharts 可视化
  2. 智办事：高效的目标管理，让企业战略目标得以实现
  3. OFDM专题之子载波间干扰问题（二）
  4. 洛谷3857 [TJOI2008]彩灯
  5. HDU 2282 Chocolate （最小费用最大流）
  6. 十七、深入Java的类
  7. 拆解苹果iPhone11
  8. 安卓手机能用吗_手机才用两年卡的不行，是手机问题吗，想问手机最长能用几年？...
  9. BigDFT的编译运行
  10. vscode中常用的快捷键
  11. 织梦程序添加音乐上传功能
  12. 【从0开始音乐demo的制作：预计耗时15小时(一)】项目创建和Vue 3.x vue-cli 的选项问题
  13. css-自定义字体（LED）
  14. Pytest测试用例之setup与teardown方法(一)
  15. HiveException java.lang.RuntimeException: Unable to instantiate org.apache.hadoop.hive.ql.metadata.S
  16. 期货手续费标准和保证金比例
  17. js判断手指上滑和下滑
  18. Linux时间同步：chrony
  19. 从 Kdb+ 到 DolphinDB
  20. SMC先导换向阀两位五通单电控，复位方式

热门文章

  1. 渗透测试:密码破解小结
  2. Plotly学习 3D三维轴的设置
  3. HiveSql计算占比、同比、占环比
  4. 《设计模式》设计模式的基本原则
  5. APE文件学习——文件头(1)
  6. android平板电脑怎么才能连接,安卓平板电脑如何连接网线？
  7. 【Linux内核】Linux软中断处理机制-ksoftirqd
  8. Unity3D-设置天空盒
  9. 微信小程序免费资源大全
  10. 矩阵游戏java_矩阵取数游戏JAVA题解