微信小程序demo 第1篇
实现效果
运行
需要安装有微信开发者工具。把项目下载到本地。在微信开发者工具中打开该项目则可预览。
重点讲解(购物车功能)
以往的购物车,基本都是通过大量的 DOM 操作来实现。微信小程序其实跟 的用法非常像,接下来就看看小程序可以怎样实现购物车功能。
需求
先来弄清楚购物车的需求。
根据设计图,我们可以先实现静态页面。接下来,再看看一个购物车需要什么样的数据。
微信小程序demo 第2篇
传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下,并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册,直接在页面中使用。
在components目录下创建两个vue组件,分别为、,组件将会通过import引用,而组件将会通过配置easycom后直接引用。目录结构及组件代码如下:
、两个组件代码相同,以为例,如:
此时,需要在中配置easycom,配置如下:
在使用、两个组件时,引入的代码分别为:
可见,通过配置easycom后,组件无需通过import引用也可直接使用。
关于以上3种常用配置,全文件配置脚本如下:
微信小程序demo 第3篇
以下配置中,包含三个页面,分别是主包的首页、我的模块及分包的支付模块,目录结构如下图:
中,主包、分包路由配置如下(其中页面style属性配置项,同globalStyle配置一致)
为什么需要分包的存在?是因为微信官方对小程序的主包大小做了严格限制,编译后的主包代码大小容量不允许超过2M,超出部分应使用分包。
运行规则:主包代码块在小程序启动时就会被同步主动加载,分包代码在小程序启动时不会被执行,分包模块只有在被引用时才会被异步加载进来。
主包页面调起分包模块页面,使用常规路由API实现即可,如: