小程序~~4(npm支持+分包加载+开放功能)

目录

1.npm支持

自定构建npm

vant组件库的使用

vant app组件样式覆盖

2.分包加载

介绍

分包加载及打包引用原则

独立分包的配置

分包预下载

3.开放能力

获取微信头像

获取微信昵称

转发功能

分享到朋友圈

手机号验证组件

客服功能

框架接口-getApp()

页面间通信

自定义导航栏


1.npm支持

自定构建npm

为了简化文件目录,将小程序源码放在miniprogram目录下

需要在project.config.json中配置相关属性

vant组件库的使用

先将app.json中的"style":"v2"去除,之后在官方文档中找到想要的组件样式,将组件在app.json中进行注册,即引入组件,之后便可以在wxml中直接使用组件

vant app组件样式覆盖

第一种解除样式隔离,修改styleIsoation:"shared",之后再去.wxss文件中修改样式,注意修改样式时可以写.van-button--primary{}

第二种使用外部样式类,给组件定义一个类名,在.wxss文件中就可以进行修改

第三种使用css变量,先在app.wxss文件中定义一个page{}方法,在其中定义css变量(以--开头),之后在组件使用者的页面wxss文件中使用该变量,用van(--变量名)来调用;如果需要批量修改组件,可以再定制一个类名,之后再页面的wxss文件中就可以使用来修改样式

2.分包加载

介绍

分包加载及打包引用原则

打包原则:tabBar页面必须在主包内,又属于分包的pages页面,分包之间不能相互嵌套

引用原则:主包不能引用分包的资源,但分包可以使用主包的公共资源;分包与分包之间资源无法相互引用,但是分包异步化时不受此条件限制

独立分包的配置

独立分包:是指能够独立于主包和其他分包运行的包

从独立分包中的页面进入小程序,不需要下载主包,当用户进入普通分包或主包内页面时,主包才会被下载;开发者可以将功能相对独立的页面配置到独立分包中

设置独立分包:给subPackages定义的分包结构添加independent:"true"字段

注意:独立分包不能依赖主包和其它分包中的资源;主包中的app.wxss对独立分包无效,所以不在里面写分包的样式

分包预下载

分包预下载需要在app.json文件中通过preloadRule字段设置预下载规则

preloadRule是一个对象,对象的key表示访问哪个路径时进行预加载,value是进入此页面的预下载设置,有两个配置项

packages:进入页面后预下载分包的root或者name,__App__表示主包

network:在指定网路下预下载,可选值为all(不限网络)、 wifi(仅wifi条件下预下载)

第一个是在进入index页面时进行预下载goodModule分包,此处写的是根路径,可以只写一个goodModule

第二个是预下载主包,写的是根路径,其中packages的属性值是__APP__

3.开放能力

获取微信头像

在wxml文件中吧图片放在一个按钮里面(想实现点击的效果),将图片地址改为一个变量,在js文件中声明,方便后续修改;之后给按钮绑定一个open-type="chooseAvatar"和点击事件;在js文件中调用点击函数,将获取过来的值重新赋值给avatarUrl,实现将自己的微信头像上传

获取微信昵称

通过form包裹住input和button组件;将input组件的type值设置为nickname,在用户输入框输入时,键盘上方显示微信昵称,添加name属性,form组件会自动收集带有name属性的表单元素的值;将按钮的form-type改为submit,按钮就变成了提交按钮,点击时触发提交事件

转发功能

转发功能有两种方式

页面.js文件中必须声明onShareAppMessage事件监听函数,并自定义转发内容,只有定义此事件处理函数,右上角菜单才会显示转发按钮

通过给button组件设置属性open-type="share",可以在用户点击过后触发Page.onShareAppMessage事件监听函数

分享到朋友圈

页面要先设置“发送给朋友”,即声明onShareAppMessage事件监听函数;之后再声明onShareTimeline事件监听函数

手机号验证组件

客服功能

框架接口-getApp()

在小程序中可以通过getApp()来获取到小程序全局唯一的App实例,因此在App()方法中添加全局共享的数据、方法,从而实现页面、组件的数据传值

页面间通信

自定义导航栏

  • 14
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值