精华内容
下载资源
问答
  • 搭建vue前端框架或微信小程序vue框架步骤 1.下载node.js 下载地址:https://nodejs.org/en/download/ 查看node、npm版本,确保环境正确 node --version npm --version 2.安装vue脚手架工具vue-cli 若开发工具为...

    搭建vue前端框架或微信小程序vue框架步骤

    1.下载node.js
    下载地址:https://nodejs.org/en/download/
    查看node、npm版本,确保环境正确

    node --version
    npm --version
    

    2.安装vue脚手架工具vue-cli
    若开发工具为IntelliJ IIDEA,创建项目步骤为create new project -> static web;
    若开发工具为Visual Studio Code,则OPEN Floder -> 可为本地空文件夹名。
    确保Terminal中指向位置为正确位置,执行
    npm install -g @vue/cli-init

    3.初始化结构
    vue init webpack happyHealth
    根据安装步骤提示与项目具体情况进行选择
    在这里插入图片描述
    4.安装插件与运行
    执行cd happyHealth或者通过工具打开happyHealth文件夹

    cd happyHealth
    npm install
    

    可在index.js文件中更改端口号
    在这里插入图片描述

    npm run dev
    

    执行启动代码,待启动成功,浏览器打开默认页面
    在这里插入图片描述

    PS:
    若要使用VUE搭建微信小程序前端框架,可借助美团点评的mpvue框架,如上步骤,在项目初始化结构时,更换执行如下命令,其余步骤雷同

    vue init mpvue/mpvue-quickstart happyHealth
    
    展开全文
  • 基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系。
  • 微信小程序前端框架/UI组件

    千次阅读 2019-03-04 16:56:46
        之前做的小程序小工具都是使用原生的自己编码的,难免会有东拼西凑的地方,正好这段时间有空,准备花点时间找一个较好的小程序组件库或者框架,来提示开发效率,以及能提高逼格- - 准备     百度了一堆,...

    前言

        刚开始写bolg,尝试记录一些日常。
        无意找了个很好看的小程序UI组件库:ColorUI github

        之前做的小程序小工具都是使用原生的自己编码的,难免会有东拼西凑的地方,正好这段时间有空,准备花点时间找一个较好的小程序组件库或者框架,来提示开发效率,以及能提高逼格- -

    准备

        百度了一堆,结果如下:

    • 组件库
    1. 有赞UI组件库:vant webapp github
      适用商城类,简单的需求用这个也不错
    2. 蘑菇街UI组件库:MinUI github
      挺好看的,但是搜出来使用这个的不多,可能我姿势不对吧
    3. TalkingData UI组件库:iView webapp github
      组件多...
    4. Wux WeApp UI组件库:Wux WeApp github
      好像是个人开发的,效果也不错,有日历手风琴等
    5. 京东 UI组件库:Taro-UI github
      结合taro框架用react开发方式的,不适合
    6. ColorUI UI组件库:ColorUI github
      直接添加class即可实现效果,视觉效果很棒。
    • 前端框架
    1. 美团点评:mpvue github
      使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。
    2. 京东:Taro github
      多端统一开发框架,支持用 React 的开发方式编写一次代码,生成能运行在微信小程序、H5、React Native 等的应用
    3. 腾讯:WePY github
      接近于 Vue.js
    4. WeTouch:Touch WX 文档
    • 小结
      框架:京东的是 React 方式编码,其他多数是vue方式。不考虑框架,因为都没用过,耗时多- -
      UI组件:看了issue和考虑大厂使用,选用vant webapp、iView webapp

        前前后后花了2,3天时间了解微信小程序的组件库和前端框架,本来准备使用mpvue的,但基于开源时间不是很长,自己不熟悉vue.js,怕自己爬不出坑放弃了,还是选择UI组件库。因为懒,选了组件较多的iView webapp,还有一个原因就是iview还有iview admin后台框架,万一哪天能用上呢~
        准备使用的是后台框架ASPNET MVC5.0+EASYUI+EF+WEBAPI,小程序前端选择iView webapp。当然还有好看的Color UI

    开始

        上面基本上都会用到npm;而且由于微信小程序写法也类似vue,加上选择的iView是基于vue.js的UI组件库,iView webapp使用方式与iView基本一致,所以还要学习了解一下vue.js。就这样准备使用iView webapp前,再研究研究node.js和vue.js咯,毕竟是奔着学习来的。

        网上找了一个文章,感觉不错,大致浏览,了解即可,毕竟这次目的是小程序。node.js入门


        iView只有PC端,只能转到vant这个UI组件了。

    展开全文
  • 后来发现基本上从事小程序开发的人员,都是使用vue框架进行的,我也逐渐开始接触vue,后来在了解的过程中发现,vue的很多思想和微信小程序本身框架很契合。 作为一个笔记,记录微信小程序的template的用法,貌似...

    本身本人是纯粹使用微信小程序开发自带的简单官方组件进行一些程序的开发,后来发现基本上从事小程序开发的人员,都是使用vue框架进行的,我也逐渐开始接触vue,后来在了解的过程中发现,vue的很多思想和微信小程序本身框架很契合。

    作为一个笔记,记录微信小程序的template的用法,貌似就是vue的用法,经典的前后端分离。

    以下为例:

    report 页面,有report.js、 report.wxml、 report.json、 report.wxss四个文件,我想在report.wxml中引用一个模板,用来多人开发,加快团队开发效率。两个人商量好调用方式,就开始各自的开发了。

    比如说,我开发report,另外一个人开发显示页面(src.wxml),最后我在我的report.wxml文件中调用他写的东西。

    具体实现如下:

    report.wxml

    <import src="../../../***/src.wxml(这个是report.wxml到src.wxml页面的相对路径)"/>       (写在一开始的位置)

    /**********************在想要调用的位置,开始引用***********************/

    <template is="showSrc"  data="{{data:temSrc}}"/>

    report.js

    page({

            data:{

                 temSrc:"this is a test of template"

            }

    })

    以上是我写的,接下来就是别人写的代码了

    src.wxml

    <template name="showSrc">

                  <text>

                           {{data}}

                  </text>

    </template>

    data:是不是感觉很熟悉,和微信自带的数据绑定是不是很类似

    showSrc:是不是有点像在wxml页面申明一个函数,再在js页面写该函数

    temSrc:这里注意一下,调用绑定数据,不需要再另外加{{ }}了,如果是直接写,则写为data="{{data:this is a test of template}}"

    问题:暂时没有通过模板,直接定义引用的css,目前的实现方法是,直接把引用部分放置于<view></view>中,修改view的css来实现的。

    展开全文
  • 【课程简介】 课程目标:提高vue实战技术和学习uniapp开发 课程特色:该门课程属于中高级进阶课程,课程开发一个仿阿里飞猪旅游app的微信小程序,该课程使用uni-app框架结合小程序云开发,开发语言使用vue,使用...
  • 一.什么是mpvue框架? mpvue 是一个使用 Vue.js 开发小程序的前端框架框架基于 Vue.js 核心(所以建议熟练掌握vue再使用mpvue框架,否则还是建议...② 微信开发者工具(这个工具是开发、调试和模拟运行微信小程序的最
  • 实训的时候写的一个项目,有2个使用端,用户端是微信小程序,后台管理端是vue写的网页,后端统一是一个项目Spring+SpringMVC+Mybatis。 数据库设计

    实训时小组写的一个项目,有2个使用端,用户端是微信小程序,后台管理端是vue写的网页,后端统一是一个项目Spring+SpringMVC+Mybatis。

    项目仓库

    • 小程序:https://github.com/GrapevineLin/WSLLShopping
    • 后端: https://github.com/GrapevineLin/WSLL-spring
    • 后台管理端: https://github.com/GrapevineLin/WSLL-Admin

    项目截图

       
       
       

    需求描述

    1. 前台系统的功能设计
      前台管理是为用户提供友好的操作界面,供用户进行商品浏览、购物和生成订单等操作。
      而当用户使用购物车时,首先进行登录身份验证。如果为新用户,需要进行注册。
    2. 用户注册和登录
      用户在进行购物之前,需要先进行登录,这样用户结束购物时,通过登录账号来进行结账。对于新用户,可以通过绑定微信信息进行注册。
    3. 商品浏览与搜索
      商品浏览是网上购物系统网站提供给用户的一个基本功能。用户可以根据商品的类别来分类浏览商品。在系统的主页面上,能够对所有商品类别进行列表,用户可以通过单击商品类别名称,来浏览商品,查看商品的图片和价格等最基本的信息,在浏览的过程中,可以将满意的商品添加到购物车中。
      用户也可以通过使用系统提供的收索功能对商品进行收索,查找自己需要的商品。
    4. 购物车
      用户在浏览商品的过程中,可以将所满意的商品通过单击“购买”按钮添加到购物车中。浏览结束或者在浏览的过程中可以查看购物车里放置商品的情况,并且可以查看所购买商品的名称、价格、描述、购买数量、单价等信息。
      在购物车中可以通过单价“移除”按钮将不想购买的商品删除,也可以任意更改购买商品的数量。
    5. 产生订单
      在用户购物结束后,进行结账时,需要填写相关的信息和确认购买商品的信息。用户确认后开始填写订单信息,包括号码、类型、送货的详细地址。填写完毕之后,用户就可以提交订单了。用户可以在下次登录后查看自己订单和发货情况。
    6. 用户留言功能
      为了能够及时了解用户的需求和意见,本网站增加了留言薄功能,以便本网站及时了解用户需求并即使改进不足,以便可以更好地为用户服务。
    7. 后台管理的功能设计
      后台管理的功能主要是为了网站的管理员提供对商品信息、订单信息的管理。
    8. 商品信息管理
      在商品信息管理模块中,管理员可以添加新的商品,设置商品的类型、名称、价格等信息。也可以对已添加的商品信息进行修改和删除。
    9. 订单管理
      在订单管理模块中,实现管理员对用户提交的订单进行查看,也可以对交易完成后保存一定时间的订单信息进行删除。同时管理员的一项重要工作就是设置用户购买商品的发货状态。如果设置了用户订单已经发货,则当用户查看订单时,可以看到订单交易的情况。

    功能分析


    可实现需求 具体分析
    登录及权限 用户在进行购物之前,需要先进行登录,这样用户结束购物时,通过登录账号来进行结账。后台管理系统只有拥有管理员权限的用户才能登陆。
    商品浏览与搜索 用户登录后在商城主页可以查询和浏览商城信息,可以在分类页面对商品的类别进行选择。
    购物车 用户在浏览商品的过程中,可以将所满意的商品通过单击“购买”按钮添加到购物车中。
    产生订单 在购物车中点击付款,输入订单收获地址,核实商品相关信息,点击生成订单,可在用户页面查看订单信息。
    商品信息管理 在商品信息管理模块中,管理员可以添加新的商品,设置商品的类型、名称、价格等信息。也可以对已添加的商品信息进行修改和删除。
    订单管理 在订单管理模块中,实现管理员对用户提交的订单进行查看,也可以对交易完成后保存一定时间的订单信息进行删除。

    开发环境

    IDE: Idea VS Code
    JDK: JDK1.8.x
    Maven: 3.6.0
    SQL: MySQL 5.7.x
    Node: Node 10.16.0
    NPM:6.9.0

    数据库设计

    一共9张表:商品,订单,用户,管理员,购物车,订单商品,商品类别,评论信息,地址

    1. 用户表(user)
      这里user表有个坑很值得注意一下,因为我们是获取微信用户的昵称,有的人昵称含有emoji表情,如果我们使用utf8则存储不了 ,因为utf8只能存储3个字节的数据,标准的emoji表情是4个字节,所以我们选择utf8mb4的字符集.
    DROP TABLE IF EXISTS `user`;
    CREATE TABLE `user`  (
      `openid` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
      `nickname` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
      `avatarUrl` varchar(400) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
      PRIMARY KEY (`openid`) USING BTREE
    ) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;
    
    SET FOREIGN_KEY_CHECKS = 1;
    
    1. 地址表(address):
    DROP TABLE IF EXISTS `address`;
    CREATE TABLE `address`  (
      `address_id` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
      `name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
      `phone` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
      `region` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
      `detail` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
      `defaulted` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
      `openid` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
      PRIMARY KEY (`address_id`) USING BTREE
    ) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;
    
    1. 管理员表(admin)
    DROP TABLE IF EXISTS `admin`;
    CREATE TABLE `admin`  (
     `username` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
     `password` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
     `user_id` bigint(10) NOT NULL AUTO_INCREMENT,
     PRIMARY KEY (`user_id`) USING BTREE
    ) ENGINE = InnoDB AUTO_INCREMENT = 3 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;
    
    1. 购物车表(cart)
    DROP TABLE IF EXISTS `cart`;
    CREATE TABLE `cart`  (
      `cart_id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'id',
      `openid` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '用户id',
      `goods_id` int(11) NULL DEFAULT NULL COMMENT '商品id',
      `total_num` int(11) NULL DEFAULT NULL COMMENT '商品数量',
      `file_path` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
      `goods_price` decimal(10, 2) NULL DEFAULT NULL,
      `goods_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
      PRIMARY KEY (`cart_id`) USING BTREE
    ) ENGINE = InnoDB AUTO_INCREMENT = 74 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;
    
    1. 评论表(comment)
    DROP TABLE IF EXISTS `comment`;
    CREATE TABLE `comment`  (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `openid` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
      `order_id` varchar(16) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '订单id',
      `starIndex` int(11) NULL DEFAULT NULL,
      `comment` varchar(500) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
      PRIMARY KEY (`id`) USING BTREE,
      INDEX `orderid1`(`order_id`) USING BTREE,
      CONSTRAINT `orderid1` FOREIGN KEY (`order_id`) REFERENCES `orders` (`order_id`) ON DELETE CASCADE ON UPDATE RESTRICT
    ) ENGINE = InnoDB AUTO_INCREMENT = 16 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;
    
    1. 商品类目表(g_type)
    DROP TABLE IF EXISTS `g_type`;
    CREATE TABLE `g_type`  (
      `type_id` varchar(10) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '类目id',
      `type_name` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '类目名称',
      `type_describe` varchar(200) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '类目描述',
      `type_enable` varchar(1) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '是否启用  \"1\"为启用  “0”为不启用',
      `type_sup` int(10) NULL DEFAULT NULL COMMENT '上级类目ID',
      `type_level` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '类目级别',
      `type_file_path` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '图片路径',
      PRIMARY KEY (`type_id`) USING BTREE
    ) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;
    
    1. 商品表(goods)
    DROP TABLE IF EXISTS `goods`;
    CREATE TABLE `goods`  (
      `goods_id` int(10) NOT NULL AUTO_INCREMENT COMMENT '商品编号',
      `goods_type` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '商品类目',
      `goods_name` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '商品名称',
      `goods_describe` varchar(200) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '商品描述',
      `goods_price` decimal(10, 2) NULL DEFAULT NULL COMMENT '商品金额',
      `goods_validity` date NULL DEFAULT NULL COMMENT '即购买后多长时间内有效',
      `goods_enable` varchar(1) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '是否启用  \"1\"为启用  “0”为不启用',
      `goods_browse` int(10) NULL DEFAULT NULL COMMENT '库存',
      `goods_buy` int(10) NULL DEFAULT NULL COMMENT '购买数',
      `goods_picture_path` varchar(200) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '图片文件路径',
      `goods_create_time` date NULL DEFAULT NULL COMMENT '商品添加时间',
      PRIMARY KEY (`goods_id`) USING BTREE
    ) ENGINE = InnoDB AUTO_INCREMENT = 64 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;
    
    1. 订单表(order_goods)
    DROP TABLE IF EXISTS `order_goods`;
    CREATE TABLE `order_goods`  (
      `id` int(10) NOT NULL AUTO_INCREMENT,
      `order_id` varchar(16) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '订单id',
      `goods_id` int(10) NULL DEFAULT NULL COMMENT '商品id',
      `num` int(10) NULL DEFAULT NULL COMMENT '成交数量',
      PRIMARY KEY (`id`) USING BTREE,
      INDEX `orderid`(`order_id`) USING BTREE,
      CONSTRAINT `orderid` FOREIGN KEY (`order_id`) REFERENCES `orders` (`order_id`) ON DELETE CASCADE ON UPDATE RESTRICT
    ) ENGINE = InnoDB AUTO_INCREMENT = 64 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;
    
    1. 订单状态表(order)
    DROP TABLE IF EXISTS `orders`;
    CREATE TABLE `orders`  (
      `order_id` varchar(16) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT 'id',
      `openid` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '用户id\r\n',
      `pay_status` varchar(12) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '支付状态 待付款 代发货',
      `create_time` datetime(0) NULL DEFAULT NULL COMMENT '订单创建时间',
      `pay_price` decimal(10, 2) NULL DEFAULT NULL COMMENT '商品总价',
      PRIMARY KEY (`order_id`) USING BTREE
    ) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;
    

    小程序页面

    小程序一共有4个tabbar:首页,分类,购物车,我的.商品的展示这一块在多个地方使用,比如首页和分类都有,因此可以将其组件化,方便复用.
    技术选型:
    小程序:2.8.1
    小程序组件:iView 2.0.0

    由于代码量巨大,所以不在这里贴出来,可以去github查看.

    后端

    后端采用java的SSM编写.

    难点

    1. 跨域CORS:因为是前后端分离的项目,所以会产生跨域的问题,解决方案可以有前端也可以是后端解决;最后是采用了后端配置跨域解决了问题,当然跨域的办法很多,不止局限这一种。
    <filter>
        <filter-name>encoding</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>encoding</filter-name>
        <url-pattern>*.action</url-pattern>
    </filter-mapping>
    
    1. Token:token的使用就是为了数据安全,原理是前端登录,后端生成token给前端,前端存储token然后在后续请求头加上token,后端对之后的每次请求都会验证token是否有效。
      Token的具体实现可以查看这篇文章

    技术选型

    视图框架:SpringMVC 5.x
    持久层框架:Mybatis 3.x
    数据库连接池:Druid 1.x

    管理端

    用Vue写的一个及其简易的后台管理系统.
    技术选型:
    前端框架:Vue.js 2.x
    页面组件:Element 2.x
    后台交互:Axios 0.18.0

    展开全文
  • mpvue是一款使用Vue.js开发微信小程序前端框架。使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力。如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为H5,mpvue...
  • uniapp开发仿阿里飞猪旅游微信小程序vue中高级课程 五年互联网实战开...
  • 前言mpvue 是一款使用 Vue.js 开发微信小程序前端框架。使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力。如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为...
  • 官网直播网址http://www.dongyibiancheng.com/expand/4yg2w9 每天上午十点 ,下午三点,晚上八点,直播课程H5混合开发,框架MUI-H5+,微信小程序Vue.js,PHP,JavaScript,ReactNative,
  • 接触微信小程序有一段时间的开发者或开发团队,我相信多多少少都会为自己搭建封装一些便于开发的框架/脚手架,尤其是一些做过Web开发的开发者,受到现如今Web主流开发框架如Angular,React,Vue等的核心思想的影响,...
  • 微信小程序框架一般都是指前端框架,而不是类似于传统PC端的那些YII2,Tp5.0,CI等框架,这些原PC端的框架才是真正的包含了前后端,才算一个完全完整的框架,这是从PC端开发角度来理解的。而现在因为移动互联...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,451
精华内容 4,180
关键字:

微信小程序前端vue框架

vue 订阅
微信小程序 订阅