在"globalStyle":{}属性下加入以下片段,可按需引入具体需要全局引入的组件,引入规则如下:
单页引用
把上述的代码放在对应的页面配置内,如:
如打开的是manifest.json的源码,可以在对应的位置增加以下配置:
1.未找到van-toast节点,请确认selector及context是否正确
2.在非组件的js文件中引用Toast(),正常使用可能会像如下的方式:
开发模式下是可以正常调用,但是在发行模式下,会报错
如果把Toast打印出来,会发现为null,原因是Toast并未正常引入
理由揭秘:
打开/wxcomponents/vant/toast/toast.js,你会发现,最后一句代码为:
而当回去修改了一下代码,热重载后,这句话就变成了:
exportdefaultToast;而编译后引用这个文件的代码始终是一样的:
都是通过[module].Toast()来进行引用。
这就会导致一个问题,我们什么都不改直接引用的话,会出现热重载后是能正常,初始加载和发布都不能正常使用,因为exports.Toast和exportdefaultToast我们引入后的内容是不一样的
把/wxcomponents/vant/toast/toast.js的最后一句导出语句修改为:
exports.Toast=Toast;引入语句修改为:
constToast=require('../wxcomponents/vant/toast/toast.js').ToastexportfunctionloadInfo(){ Toast('加载成功')}大功告成!
若有更优美的解决方案欢迎交流~
修改pages.json文件
{...,"globalStyle":{"navigationStyle":"custom",...}}创建对应的自定义组件:components/commonHeader/commonHeader.vue,在界面中引入即可(可按下方第4点的方式进行按需引入的设置)
私人tips:
获取系统状态栏和菜单高度,用于设置自定义顶部导航栏的高度
修改App.vue文件
onLaunch:function(){console.log('AppLaunch')uni.getSystemInfo({success:function(e){//#ifdefMP-WEIXINuni.$StatusBarHeight=e.statusBarHeight;//getMenuButtonBoundingClientRect用于获取页面右上角圆角按钮的位置信息letcustom=wx.getMenuButtonBoundingClientRect();uni.$CustomBarHeight=custom.bottom-e.statusBarHeight+8//#endif//uni为全局对象,可以挂载全局参数,在其他组件可以直接使用}})}私人tips2:监听页面滚动动态修改顶部导航栏样式
场景:可用于全屏背景图,滚动后需要修改顶部导航栏的背景和文字颜色的场景
{...,"tabBar":{"custom":true,"list":[{"pagePath":"pages/index/index","text":"首页"},{"pagePath":"pages/passed/index","text":"主页面1"},{"pagePath":"pages/my/index","text":"个人中心"},...]}}创建对应的自定义组件:components/commonTabbar/commonTabbar.vue,在对应主界面中引入即可,可以使用vant的tabbar组件,可参考如下:
为了使界面主要内容不受tabbar覆盖,可以在van-tabbar组件前面加入一个空节点,如下:
{...,"easycom":{"autoscan":true,"custom":{"^uni-(.*)":"@/components/uni-$1.vue",//匹配components目录内的vue文件"^vue-file-(.*)":"packageName/path/to/vue-file-$1.vue"//匹配node_modules内的vue文件}}}只要开启了autoscan,会自动扫描目录规则符合/components/组件名称/组件名称.vue的所有文件,自动进行引入,无需再在custom中引入
引入后page中直接使用组件即可
注意:如果新建的组件引用无效,在HBuilder中重新编译项目试试
其实引用组件不麻烦,参照demo,可以按照自己的需求修改菜单icon之类的,比较方便
为了方便改造,不采用npm的方法进行安装,直接打开代码片段
在代码片段中对应的两个目录,拷贝到自己的项目中/wxcomponents目录下
1.wxml-to-canvas通常用于生成海报,而海报又通常通过popup的形式弹出,所以需要改造渲染时机,等popup弹出后再渲染
默认引用即渲染,但是canvas没法在一个隐藏节点中渲染,所以把默认的渲染时机改为手动(通过自定义代码调用渲染)
修改wxml-to-canvas/index.js文件
methods:{initCanvas(){returnnewPromise((resolve,reject)=>{constdpr=wx.getSystemInfoSync().pixelRatioconstquery=this.createSelectorQuery()this.dpr=dprquery.select('#canvas').fields({node:true,size:true}).exec(res=>{constcanvas=res[0].nodeconstctx=canvas.getContext('2d')canvas.width=res[0].width*dpr canvas.height=res[0].height*dprctx.scale(dpr,dpr)this.ctx=ctxthis.canvas=canvasresolve(canvas)})})},...},插入组件
methods:{asyncopened(){constcanvas=awaitthis.$refs.widget.initCanvas()Toast.loading({message:'加载中',forbidClick:true});constobj={wxml:'...',styles:'...'}this.$refs.widget.renderToCanvas(obj).then(res=>{Toast.clear()})}}2.canvas自适应宽高改造:
仍有无法解决的问题欢迎交流!
ps:为了图快,本项目其实并没有用到vue3的一些新特性(懒得查文档),就这么凑合吧哈哈
如果你发现你的wx.getUserProfile还是能获取到非匿名信息,那可能是版本bug(* ̄︶ ̄)