TA的文章(16)
-
Weui框架项目总结（上）
一、初识微信公众号与微信小程序每天用微信公众号，微信小程序，直到今天才了解到这两者并不是同一个概念，以下列出微信公众号与微信小程序的区别：1、定位不同（公众号服务于营销与信息传递，小程序面向产品与服务）。2、实现技术区别（公众号基于H5，小程序基于微信自身开发环境与开发语言)。3、功能不同（公众号功能围绕信息展示与营销，小程序面向产品与服务）。4、体验上的差别（公众号操作延时较大，小程序体验接近原生App。5、企业以自身（营业执照注册地址）为中心，扩散至半径5km微信小程序可见，用户以自身（当前
-
Weui 框架 之tabbar底部导航
tabbar底部导航栏tabbar，底部导航，通常用作 Web 应用的主界面底部导航，类似于微信主界面的底部“微信”、“通讯录”、“发现”和“我”的导航区。每个功能包含一个图标和该功能简洁的文字描述。<div class="weui-tab"> <div class="weui-navbar"> <div class="weui-navbar__item weui-bar__item--on"> 选项一 </div> <div class="weui-na
-
Weui框架项目总结（下）
经过几天的自学，在对Weui框架有了基本的了解之后，小做了智学无忧微信公众号的几个页面，在这里，对这几天的学习和项目练习做个总结。一、Weui 框架的理解WeUI是一个类似微信的UI框架，由WeChat设计团队正式设计，为微信Web开发量身定制，以改善和标准化微信用户的体验。包括组分如button，cell，dialog，progress，toast，article，actionsheet，icon。二、基本会使用Weui框架基本组件，如：Flex使用 Flex 实现的栅格<div class=
-
SPA (单页面应用程序)
单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。下面示例代码实现简单单页面跳转<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="dist/style/weui.css"> <title>单页面</title>
-
ES6 let 和const
let命令关于let：1.没有预编译，不存在变量提升，没有定义使用，会报错 2.同一个作用域里，不能重复定义变量 3.for()里面时父级作用域,{}里面时子级作用域{ let a="我的"; //用let声明的变量具备块级作用域 var b=10; //var声明，全局作用域}console.log(b); //10console.log(a); //error{ //let声明，同意作用域不能有同名变量 var age=18;
-
Set和Map数据格式
我们以前学过的数据格式如 数组，json，在ES6中新增了两种数据结构：Set和Map数据格式set数据格式一、set数据结构:类似数组但不能有重复的值let set=new Set(["a","b","c",]); //set.add() 往set里面添加一项set.add("d");set.add("d").add("e").add("f");//set.delete(); //删除一项set.delete("b");//set.has();判断有没有这个值,返回true或falseset.
-
Vuejs 开篇
Vue.js是一个轻巧、高性能、可组件化的MVVM库。Vue 的核心库只关注视图层，并且非常容易学习，同时拥有非常容易上手的API（中英文都有提供）Vue快速入门准备：Vue.js 地址：http://cn.vuejs.org/Bootstrap.js 地址：http://v3.bootcss.com/getting-started/#download两个概念：MVVM ---- M model模型(当前视图中可用的数据) V view视图(渲染UI HTML) VMMVC------ M mo
-
Vue.js v-model指令
vue.js的一大功能便是实现数据的双向绑定，本文就表单处理时运用v-model指令实现双向绑定做一个介绍v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上，所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据。下面我们看看v-model 在各类表单元素上的用法：<script> let my=new Vue({ el:"#my",
-
Vue.js 自定义指令
自定义指令除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。注册一个全局自定义指令 `v-hello`Vue.directive('hello',{ //可以有参数el binding,binding中包括以写属性：name,value //binding.value=>绑定的变量 //
-
Vue.js 组件基础
组件是可复用的 Vue 实例，与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。组件的创建方式一var myComponent=Vue.extend({ template:'<h2>hello</h2>'});Vue.component('hello',myComponent);组件的创建方式二Vue.component('world',{ template:'<h2>wo
-
Vuejs 购物车项目
效果图如下：需求：实现添加到购物车，删除，计算金额功能一 、购买功能实现思路：点击购买将商品添加到购物车,先循环对比看要添加的商品是否已经存在与购物车，如果存在，只加数量，不存在则添加实现代码 add(val) { //购买 ，这里我是传了对应的item 过来 var result=true; for(var i of this.goods){ if(val.book==i.book){ //判断名称是否已经存在
-
Vuejs 组件数据的传递
1. 父组件传子, 在子组件写props 接收数据。2. 子组件可以使用 $emit 触发父组件的自定义事件。vm.$emit(事件名称, 要传递的参数 )触发当前实例上的事件var vm;window.onload=function () { vm=new Vue({ el:'#box', data:{ flag:'my-hello',//设置标记,写的哪个组件就显示哪个组件 leftwords:''
-
Vue.js 路由钩子详解
vue router路由钩子详解导航钩子正如其名，vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。全局钩子你可以使用 router.beforeEach 注册一个全局的 before 钩子：const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ...})同样可以注册一个全局的 af
-
vuejs 总结之 v-router 懒加载
我们先看看下面这个面试题：vue-router第一次加载组件资源过多导致加载缓慢，如何解决？答案是：通过路由懒加载的形式来解决这个问题那么什么是路由懒加载呢？懒加载也叫延迟加载，路由懒加载是利用Vue.js的异步组件和webpack的代码分割，把不同路由对应的不同组件分割成不同的代码块，当路由被访问时，再去加载对应的组件，然后每次进入一个新页面才加载该页面所需要的资源（也就是异步加载路由）了解 Vue 的异步组件 Webpack 的代码分割功能刚开始我们使用路由可能是下面这样（index.js）
-
WeCOS 小程序瘦身工具
小程序码包大小需小于 1MB ，大于 1MB 的代码包将上传失败，当我们大量使用的是本地图片的时候就会导致文件过大，无法上传，这时可以用到WeCOS 小程序瘦身工具来给小程序进行瘦身通过 WeCOS，小程序中的图片资源会自动上传到COS 上，WeCOS 会自动替换图片资源地址的引用为线上地址，移除项目目录中的图片资源，使用wecos的步骤：注册腾讯云账户。 https://cloud.tencent.com/登录 对象存储控制台，开通对象存储服务，创建存储桶在 Node.js 官网下载环境并安装
-
小程序项目总结
这是我的第一个小程序项目，以下为效果图这个gif图是先通过FSCapture录屏工具录屏，然后再通过convertio.co 网站转换 gif 格式生成，网址： https://convertio.co/zh/项目使用微信开发者工具开发，一起分5个页面，4个tab页，项目虽小，代码不少，所以再这里就不一一总结，只总结自己觉得重要的几点一、先说首页：1. tabbar 配置：这里是再app.json里面配置全局tabbar 2.轮播组件：轮播, 直接使用官方提供的 swiper 组件，属性详情参考
