微信小程序制作样本 第1篇
传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下,并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册,直接在页面中使用。
在components目录下创建两个vue组件,分别为、,组件将会通过import引用,而组件将会通过配置easycom后直接引用。目录结构及组件代码如下:
、两个组件代码相同,以为例,如:
此时,需要在中配置easycom,配置如下:
在使用、两个组件时,引入的代码分别为:
可见,通过配置easycom后,组件无需通过import引用也可直接使用。
关于以上3种常用配置,全文件配置脚本如下:
微信小程序制作样本 第2篇
以下配置中,包含三个页面,分别是主包的首页、我的模块及分包的支付模块,目录结构如下图:
中,主包、分包路由配置如下(其中页面style属性配置项,同globalStyle配置一致)
为什么需要分包的存在?是因为微信官方对小程序的主包大小做了严格限制,编译后的主包代码大小容量不允许超过2M,超出部分应使用分包。
运行规则:主包代码块在小程序启动时就会被同步主动加载,分包代码在小程序启动时不会被执行,分包模块只有在被引用时才会被异步加载进来。
主包页面调起分包模块页面,使用常规路由API实现即可,如:
微信小程序制作样本 第3篇
写法跟实现轮播图的一样。
给字添加样式:
图片布局:
添加浅色分隔框:
变成九宫格: