目录
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()方法中添加全局共享的数据、方法,从而实现页面、组件的数据传值
页面间通信
自定义导航栏