随笔分类 - vue3微信公众号商城系列
摘要：本篇介绍如何将vue3项目打包发布到服务器上，然后在微信公众号上打开。 vue3发布之前需要对项目进行编译，编译时会在项目根目录下创建 dist 文件夹，编译后的文件会存放在这里。 在编译之前，我们在public目录下建一个 config.js 的文件，代码如下： const config = {
阅读全文
摘要：我的页面效果如下： Mine.vue 页面代码如下： 布局块代码： 1 <template> 2 <div class="mine"> 3 4 <div class="mine-top"> 5 <img src="/mine.png" /><br /> 6 <span class="mine-top
阅读全文
摘要：本篇实现订单确认页面的功能，订单及订单明细表结构如下： 表名 字段 功能 表名 字段 功能 order 订单表 order_id (int) 订单编号 user_id (int) 用户编号 nickname (varchar) 昵称 mobile (varchar) 联系电话 address (va
阅读全文
摘要：本篇显示购物车中的商品，购物车表结构如下，我们通过接口服务抓取登录用户的购物车信息。 表名 字段 功能 shoppingcart cart_id (int) 购物车编号 user_id (int) 用户编号 goods_id (int) 商品编号 goods_name (varchar) 商品名称
阅读全文
摘要：本篇实现在首页展示商品功能，表结构如下： 表名 字段 功能 goods goods_id (int) 商品编号 goods_name (varchar) 商品名称 photo (varchar) 商品图片 price (decimal) 价格 商品表 页面呈现效果如下： 第1步：在 api.js 中
阅读全文
摘要：在开始之前，先看看官方对组件的定义： vue3的生态非常丰富，有各种各样的开源组件库可以拿来就用，比如vant、element-ui等，本系列不使用任何第3方组件， 完全使用原生的语法来写，只为聚焦vue3技术本身，本篇写一个自定义tabbar组件，效果如下图所示： 该组件实现如下功能： 1. 底部
阅读全文
摘要：1. 一个商城要实现购物的功能，需要能识别用户的身份，这样才能完成加购物车，下单，付款等操作。 但微信公众号商城和PC端商城有些不一样，区别在于微信公众号商城使用微信支付的时候需要一个openid的参数（以后再具体讲） 这个参数必须访问微信公众号提供的接口才能获取到，基于这个原因，用户登录的时候必须
阅读全文
摘要：上一篇完成了2个页面之间的跳转，在浏览器中也可以正常浏览和跳转，但这2个页面并没有为适配手机屏幕设计， 如果我们用 chrome 浏览器模拟手机屏幕的大小后再看，结果如下图： （注：用 chrome 模拟手机屏幕只需要在正常情况下按下 F12 键，然后点击 红框2 处的小图标就可以了 ，改变模拟屏幕
阅读全文
摘要：在开始写第一个页面之前，先简单看下 index.html 、App.vue、main.js、HelloWorld.vue、TheWelcome.vue、WelcomeItem.vue 这几个页面的代码并了解一下它们是怎么运作的，有了一定的基础后再完成从一个页面跳转到另一个页面这个最基本的操作。 in
阅读全文
摘要：首先我们来看下项目的文件结构图，如下： 各个文件及文件夹作用如下： 文件或文件夹名称 作用 .vscode VisualStudioCode开发工具的配置信息存放目录，从这个目录可以看出vue3确实是推荐使用vscode作为开发工具的，连配置文件都提前生成出来了。 node_modules 项目中用
阅读全文
摘要：在我们的电脑上安装完nodejs后，本机就可以作为一个web服务器使用了，只不过这个web服务器上的网页使用javascript来编写。 接下来我们创建一个vue3项目，并运行起来，然后用浏览器来访问，没有什么比一个hello world更让人期待的了。 创建一个vue3项目我们可以使用脚手架工具来
阅读全文
摘要：项目忙完，这次上新，写一个前端系列，采用vue3来开发一个微信公众号商城。 前言： 1. 微信公众号商城本质也是一个网站，由一个个网页组成，只不过这些网页运行在手机端，能响应手指的点击、长按、拖拽等操作。 2. 既然是网页，当然可以用3件套（js+html+css）来写，但象vue这样的前端框架比3
阅读全文
