seo达人 - 设计每日一贴---北京兰亭妙微/UI设计公司

222020-2

事件冒泡和冒泡的阻止

事件冒泡概念：当元素触发了事件的时候，会依次向上触发所有元素的相同事件。

事件冒泡的行为演示

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

#a{

background: pink;

width: 400px;

height: 400px;

}

#b{

background: green;

width: 300px;

height: 300px;

}

#c{

background: red;

width: 200px;

height: 200px;

}

</style>

</head>

<body>

<div id="a">

我是a

<div id="b">

我是b

<div id="c">我是c</div>

</div>

</div>

<script>

var a = document.querySelector('#a')

var b = document.querySelector('#b')

var c = document.querySelector('#c')

a.onclick = fn1;

b.onclick = fn2;

c.onclick = fn3;

function fn1(){

alert('a来了')

}

function fn2(){

alert('b来了')

}

function fn3(){

alert('c来了')

}

</script>

</body>

</html>

上面这段代码一共有三个事件,三个div都分别绑定了单击事件。在页面中当单击c会连续弹出3个提示框。这就是事件冒泡引起的现象。事件冒泡的过程是：c --> b --> a 。c冒泡到b冒泡到a。

冒泡的阻止

方法：

1.event.stopPropagation(); 是事件对象Event的一个方法，作用是阻止目标元素事件冒泡到父级元素 2.event.cancelBubble = true; IE浏览器的方法

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

#a{

background: pink;

width: 400px;

height: 400px;

}

#b{

background: green;

width: 300px;

height: 300px;

}

#c{

background: red;

width: 200px;

height: 200px;

}

</style>

</head>

<body>

<div id="a">

我是a

<div id="b">

我是b

<div id="c">我是c</div>

</div>

</div>

<script>

var a = document.querySelector('#a')

var b = document.querySelector('#b')

var c = document.querySelector('#c')

a.onclick = fn;

b.onclick = fn;

c.onclick = fn;

function fn(event){

var e = window.event || event;

// 事件冒泡的阻止

if(e.stopPropagation){

e.stopPropagation(); // 通用写法

}else{

e.cancelBubble = true; // 阻止IE

}

var str = this.innerHTML;

alert(str)

}

</script>

</body>

</html>

评论(0) 浏览(2707)

212020-2

Layui中使用ECharts

seo达人

日常”过坑“记录

只记录方法不说原理。。。

步骤：

ECharts下载

引入echarts.js

注意：这里好像只能用echarts.js,其它的不行，英文后面配置的时候要改东西(ps:我也不太不清楚)

修改echarts.js

打开echarts.js，在文件大概开始处添加如下代码

window.layui && layui.define ? layui.define(function(exports){exports('echarts',factory(exports))}) :

如图：

在文件内容末尾添加如下代码：

exports.parseGeoJson = parseGeoJson;

return exports;

如图：

layui添加配置并使用

ok了，和网上其它的相比，我这个应该是最简单的配置了。

评论(0) 浏览(9785)

202020-2

h5新增的表单标签

seo达人

h5新增的表单标签

原创weixin_46366721 最后发布于2020-02-29 12:27:39 阅读数 13 收藏

展开

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

/ 谷歌 /

input::-webkit-input-placeholder{

color:blue;

}

/ 火狐19+ /

input::-moz--input-placeholder{

color:blue

}

/ 火狐4-18 /

input:-moz-input-placeholder{

color:blue;

}

/ ie高版本，ie+ /

input::-ms-input-placeholder{

color:blue;

}

/ 欧鹏 /

input::-o-input-placeholder{

color:blue;

}

</style>

</head>

<body>

<form action="" novalidate>

<input type="email">

<input type="submit">

<br>

<input type="url">

<input type="submit">

<br>

<input type="range">

<input type="submit">

<br>

<input type="number">

<input type="submit">

<br>

<input type="search">

<input type="submit">

<br>

<input type="color">

<input type="submit">

<br>

<input type="time">

<br>

<input type="month">

<br>

<input type="week">

<br>



<input type="date">

<br>



<br>

<input type="number" step="3">

<input type="submit">

<br>

<input type="text" name="aa" autocomplete="off">

<input type="submit">

<br>

<input type="text" value="" placeholder="请输入您的姓名：" autofocus>

<input type="submit">

<br>

<input type="text" placeholder="请输入您的手机号：" pattern="^1[3|5|8]\d{9}$">

<input type="submit">

<br>

<input type="file" multiple>

<br>

<input type="url" list="lll">

<datalist id="lll">

<option value="http://www.baidu.com" label="百度"></option>

<option value="http://www.sina.com" label="新浪"></option>

</datalist>

<input type="submit">

</form>

</body>

</html>

h5新增type类型：

Type=“email” 限制用户必须输入email类型

Type=“url” 输入的网址前面必须加上http://

Type=“range” 产生一个滑动条表单

Type=“number” 必须输入的是数字，调整数字大小(谷歌浏览器输入字母不可以，但是可以输入e；火狐可以输入字母，不能提交)

Type=“search” 产生一个搜索意义的表单（火狐浏览器没有叉号，谷歌有）

Type=“color” 生成一个颜色选择的表单；

产生很大的兼容问题：

type=“time” 限制用户必须输入时间类型

type=“month” 限制用户必须输入月份类型（火狐浏览器不显示）

type="week"限制用户必须输入周类型

type="datetime-local"选取本地时间

type=“date”

新增表单属性：

required 检测是否为空；

min:最小值

max：最大值

step：数值增加的幅度；如果输入的是step=“3”,搜索框输入2，按住上键调的话，会是3，因为法定值：-3 0 3 6 9

autocomplete是否自动提示信息 on（默认值）off;和name="" 一起使用；

placeholder：文本框的提示信息(value的值得手动删除，而placeholder不用删除，可以直接输入内容)

autofocus：自动聚焦，一个页面只能存在一个聚焦（auto：自动）

pattern：后面的属性值是一个正则表达式

//手机号验证pattern=“^1[3][5]\d{9}$”

novalidate：取消验证，放在form里面

multiple:选择多个文件上传

list:提示信息；必须结合datalist标签，绑定datelist (谷歌提示value和label，而火狐只有label提示)

h5:新增的表单标签

datalist

option

output:计算结果输出、脚本的输出

评论(0) 浏览(3141)

192020-2

子类对象实例化全过程

seo达人

标准格式注意：

super()和this()调用语句不能同时在一个构造器中。

super()或this()调用语句只能作为构造器中的第一句出现。原因：

无论通过哪个构造器创建子类对象，需要保证先初始化父类。

目的是，当子类继承父类后，“继承”父类所有的属性和方法，因此子类有必要知道父类如何为对象进行初始化。

从结果上看：继承性

子类继承父类以后，就获取了父类中声明的属性或方法。

创建子类的对象，在堆空间中，就会加载所父类中声明的属性。

从过程上看：

当我们通过子类的构造器创建子类对象时，我们一定会直接或间接的调用其父类的构造器，进而调用父类的父类的构造器，…直到调用了java.lang.Object类中空参的构造器为止。正因为加载过所的父类的结构，所以才可以看到内存中父类中的结构，子类对象才可以考虑进行调用。

强调说明：

虽然创建子类对象时，调用了父类的构造器，但是自始至终就创建过一个对象，即为new的子类对象。

评论(0) 浏览(3354)

182020-2

CSS简单实现圣杯布局和双飞翼布局

seo达人

一、你能学到什么？

①如何使用css变量 ②实现圣杯布局和双飞翼的简单思路 ③了解浮动和margin的特性

css变量设置(两个布局都有的部分)

:root{

/ 左边栏宽度 /

--lw:300px;

/负左边栏宽度/

--lwf:-300px;

/ 右边栏宽度 /

--rw:400px;

/负左边栏宽度/

--rwf:-400px;

/ 高度 /

--height:300px;

}

二、圣杯布局的html和css代码

html部分

<div class="holyGrail">

<div class="hg_main">main</div>

<div class="hg_left">left</div>

<div class="hg_right">right</div>

</div>

css 实现对应的四个class

.holyGrail {

height: var(--height);

/ 留出左右两栏的布局为了字体不被覆盖/

padding-left: var(--lw);

padding-right: var(--rw);

}

.hg_main{

width:100%;

float: left;

height: var(--height);

background-color: blanchedalmond;

}

.hg_left{

position: relative;

left: var(--lwf);

float: left;

margin-left: -100%;

width:var(--lw);

height: var(--height);

background-color: blueviolet;

}

.hg_right{

float: left;

margin-right: var(--rwf);

width:var(--rw);

height: var(--height);

background-color: brown;

}

三、双飞翼布局的html和css代码

html部分

<div class="doubleWing">

<div class="dw_main">

<div class="dw_con">main</div>

</div>

<div class="dw_left">left</div>

<div class="dw_right">right</div>

</div>

css 实现对应的五个class

.doubleWing{

padding-right: var(--rw);

}

.dw_left{

float: left;

margin-left: -100%;

width:var(--lw);

height: var(--height);

background-color: blueviolet;

}

.dw_main{

width:100%;

float: left;

height: var(--height);

background-color: blanchedalmond;

}

.dw_con {

margin-left: var(--lw);

}

.dw_right{

float: left;

margin-right: var(--rwf);

width:var(--rw);

background-color: brown;

height: var(--height);

}

四、学会两个布局的注意点

圣杯布局

在最外边的类（holyGrail）左右要留出左栏和右栏的宽度（使用padding-left，padding-right)

中间的div.hg_main放在最上面，优先渲染，中间div自适应，width为100%

左中右栏的div都设置浮动，左栏通过margin-left:-100%移动到和中间的div同一起点，然后通过position: relative;

left: -（左栏的宽度）；会移动到最外层div的左内边距的区域（中间div的左边）

右栏可以通过margin-right:-(右栏的宽度)；移动到最外层div的右内边距的区域（中间div的右边）

双飞翼布局

在中栏的div再加一个div,设置margin-left:左栏的宽度，这样可以省略左栏的div使用postion和left的属性移动

最外层的div可以不用预留左栏的位置了

五、两个布局的对比的优缺点

布局优点缺点

圣杯无多余dom 当中间的宽度小于左右的宽度时，结构混乱

双飞翼可以支持各种宽度，通用性强较强需要多加一层dom

代码下载地址

记得一定要自己去实现一下

评论(0) 浏览(2786)

172020-2

关于javascript跳转与返回和刷新页面

seo达人

javascript中window.open()与window.location.href的区别

window.open(‘index.html’) 表示新增一个窗口打开 index.html 这个页面，并不刷新

location.href(‘index.html’) 表示在当前窗口重定向到新页面，打开并刷新 index.html 这个页面

window.location 是 window 对象的属性，用来替换当前页，也就是重新定位当前页

而window.open 是 window 对象的方法，是用来打开一个新窗口的函数

// 打开新页面

// 注意：有些浏览器的安全设置会将window.open()屏蔽，例如避免弹出广告窗

window.open('./index.html');

// 在原窗口打开新页面

window.location.href＝"./index.html";

window.open()详解

window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')

参数解释：三个参数

window.open 弹出新窗口的命令；

‘page.html’ 弹出窗口的文件名；

‘newPage’ 弹出窗口的名字（不是文件名），非必须，可用空’'代替；

height=100 窗口高度；

width=400 窗口宽度；

top=0 窗口距离屏幕上方的象素值；

left=0 窗口距离屏幕左侧的象素值；

toolbar=no 是否显示工具栏，yes为显示；

menubar=no 是否显示菜单栏，yes为显示；

scrollbars=no 是否显示滚动栏，yes为显示；

resizable=no 是否允许改变窗口大小，yes为允许；

location=no 是否显示地址栏，yes为允许；

status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；

常用的js返回与刷新页面

在此用a标签举例

<a href="javascript: history.back(-1)">返回上一页</a>

<a href="javascript:history.go(-1)">返回上一页</a>

<a href="javascript:history.go(-2)">返回前两页</a>

<a href="javascript:location.reload()">刷新当前页面</a>

<a href="javascript:" onclick="self.location=document.referrer;">返回上一页并刷新</a>

js

// 刷新当前页面

window.location.Reload();

self.location.reload();

window.location.href = window.location.href;

评论(0) 浏览(2230)

152020-2

弹性布局(Flex)+骰子旋转实例^v^

seo达人

弹性布局（Flex）

随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

下面是一些弹性布局的基本语法：

两部分：

语法是添加到父容器上的

display : flex;（弹性盒子的标志哦！！！）

flex-direction: row; 布局的排列方向（主轴排列方向）

row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。

row-reverse 显示为行。但方向和row属性值是反的

column 显示为列

column-reverse 显示为列。但方向和column属性值是反的

flex-wrap : nowrap; 是否进行换行处理。

nowrap; 默认值，不换行处理

wrap; 换行处理

wrap-reverse; 反向换行

flex-flow : flex-direction flex-wrap 复合写法 (是有顺序的)。

justify-content ; 属性决定了主轴方向上子项的对齐和分布方式。

flex-start ：子项都去起始位置对齐。

flex-end ：子项都去结束位置对齐。

center ：子项都去中心位置对齐。

space-between : 表现为两端对齐。多余的空白间距在元素中间区域分配，两边没宽。

space-around : 边缘两侧的空白只有中间空白宽度一半即每个块都有左右间距。

space-evenly :每个flex子项两侧空白间距完全相等。

align-items : 每一行中的子元素上下对齐方式。

stretch;默认值，flex子项拉伸

flex-start;容器顶部对齐

center;容器居中对齐

flex-end;容器底部对齐

align-content : 跟justify-content相反的操作。侧轴的对齐方式。(最少需要两行才能看出效果，因为他是多行的一个上下对齐方式)

默认：多行下，有几行就会把容器划分为几部分，默认就是stretch拉伸的。

值跟justify-content取值是相同的。
语法是添加到子容器上的？

order : 排序(值越大越后)

0：默认值 eg:1234

1：放在后面 eg:1342

-2：放在前面 eg:2134

flex-grow : 扩展 ( 想看到扩展的效果，必须有空隙 )

0 : 默认值 , 不去扩展

0.5：占空隙的一半

1 : 去扩展 , 会把空白区域全部沾满

（注：子元素会按照设置的比例值来分配空隙，如果比例值总和小于1，那么会有空隙，如果比例值总和大于等于1，那么就没有空隙。）

flex-shrink : 收缩

正常默认值是1

0表示不收缩，.5收缩小一些，2收缩大一些。（大小是跟正常缩放1进行比较的）

flex-basis : 跟flex-shrink/flex-grow很像。

flex-shrink/flex-grow是设置一个比例值，flex-basis是设置一个具体值。

flex : 一种复合写法

flex-grow flex-shrink flex-basis

flex:1;

flex : 1 1 0

flex:0;

flex : 0 1 0

algin-self: 跟align-items操作很像，区别就是只是针对某一个子项。

注：默认情况下，在弹性盒子中的子元素的左右排列的。

注：

水平是主轴的时候：默认情况下，当宽高不写的时候，宽度由内容决定，高度由父容器决定。

垂直是主轴的时候：默认情况下，当宽高不写的时候，宽度由父容器决定，高度由内容决定。

注：当子项的总宽度大于父容器的时候，会自动收缩的（弹性的优先级是大于自身固定大小的）

注：当子项的内容已经达到了父容器最小宽高的时候，就会出现溢出的现象。

注：弹性布局中用的频率比较多的语法：

display : flex;

flex-direction;

justify-content;

align-items;

flex;

注：弹性布局的优势是做一维布局，网格布局的优势是做二维布局。

下面是弹性布局骰子案例代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

*{margin: 0;padding: 0;}

ul{list-style: none;}

a{text-decoration: none;}

img{display: block;}

.box1{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;justify-content: center;align-items: center;}

.box1 div{width: 30px;height: 30px;border-radius:50%;background: black;}

.box2{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;}

.box2 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;}

.box2 div:nth-of-type(1){align-self: flex-start;}

.box2 div:nth-of-type(2){align-self: flex-end;}

.box3{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;}

.box3 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;}

.box3 div:nth-of-type(1){align-self: flex-start;}

.box3 div:nth-of-type(3){align-self: flex-end;}

.box4{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}

.box4 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}

.box4 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}

.box5{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}

.box5 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}

.box5 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}

.box6{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}

.box6 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}

.box6 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}

#box{width: 400px;height: 400px;margin: 20px auto;border: 1px springgreen solid;

perspective: 500px;perspective-origin: right top;}

#box .main{position: relative;width: 150px;height: 150px;margin: 125px;

transform-style: preserve-3d;transition: 4s;transform-origin: center center -50px;}

#box .main .box1{position: absolute;background:limegreen;left: 0;top: 0;

width: 150px;height: 150px;}

#box .main .box2{position: absolute;background:limegreen;left: 0;top: 0;

width: 150px;height: 150px;left: 150px;transform-origin:left; transform:rotateY(90deg);}

#box .main .box3{position: absolute;background:limegreen;left: 0;top: 0;

width: 150px;height: 150px;left: -150px;transform-origin:right; transform:rotateY(-90deg);}

#box .main .box4{position: absolute;background:limegreen;left: 0;top: 0;

width: 150px;height: 150px;top: -150px;transform-origin:bottom; transform:rotateX(90deg);}

#box .main .box5{position: absolute;background:limegreen;left: 0;top: 0;

width: 150px;height: 150px;top: 150px;transform-origin:top; transform:rotateX(-90deg);}

#box .main .box6{position: absolute;background:limegreen;left: 0;top: 0;

width: 150px;height: 150px;transform:translateZ(-150px) rotateY(180deg);}

#box:hover .main{transform:rotateY(360deg);}

</style>

</head>

<body>

<div id="box">

<div class="main">

<div class="box1">

<div></div>

</div>

<div class="box2">

<div></div>

<div></div>

</div>

<div class="box3">

<div></div>

<div></div>

<div></div>

</div>

<div class="box4">

<div>

<li></li>

<li></li>

</div>

<div>

<li></li>

<li></li>

</div>

</div>

<div class="box5">

<div>

<li></li>

<li></li>

</div>

<div>

<li></li>

</div>

<div>

<li></li>

<li></li>

</div>

</div>

<div class="box6">

<div>

<li></li>

<li></li>

</div>

<div>

<li></li>

<li></li>

</div>

<div>

<li></li>

<li></li>

</div>

</div>

</div>

</div>

</body>

</html>

评论(0) 浏览(3377)

142020-2

vue-router学习笔记

seo达人

目录

介绍

目录

介绍

学习vue-router做的一些总结笔记，内容会持续更新！

目录

1、HTML和JS中使用router

2、动态路由

3、嵌套路由

4、编程式导航

5、命名路由、命名视图

6、重定向、别名

7、路由组件传参

8、导航守卫

9、路由元信息

10、过度动效

11、数据获取

12、滚动条位置

评论(0) 浏览(2635)

132020-2

Vue (一）、创建组件

seo达人

使用 vue-cli 创建 vue 项目：

cd 到指定的目录下命令行输入：

vue init webpack-simple <项目名称>

根据提示设置Project name

设置Project description

设置Author

设置License

设置Use sass?

cd到刚刚创建的项目名称目录

命令行输入：npm install

等待安装完成后执行 npm run dev 命令

注：以下部分练习是在https://jsfiddle.net 中进行

创建组件：（创建全局组件）

Html 部分：

<div id="app">

<div>练习</div>



<my-cmp inline-template>

<p>{{ status }}</p>

</my-cmp>

<hr>

<my-cmp inline-template>

<p>第二次使用{{ status }}</p>

</my-cmp>

</div>

Js 部分：

Vue.component('my-cmp',{

data: function () {

return {

status:'Critical'

}

},

methods: {}

});

var vm = new Vue({

el: "#app"

})

如果将data提取成公共的部分，则多次使用同一个组件则这部分数据在内存中使用的是同一块存储如下演示：

html部分：

<div id="app">

<div>练习</div>

<my-cmp></my-cmp>

<hr>

<my-cmp></my-cmp>

</div>

Js 部分

var data = {status:'Critical'};

Vue.component('my-cmp',{

data: function () {

return data

},

template:'<p>Server status {{ status }} (<button @click="changeStatus">Change</button>)</p>',

methods: {

changeStatus(){

this.status = "Nomal"

}

},

});

var vm = new Vue({

el: "#app"

})

上面的js代码当点击按钮的时候两个组件引用的数据均会发生变化

局部注册组件：

html部分：

<div id="app">

<div>局部注册组件练习</div>

<local-cmp></local-cmp>

<hr>

<local-cmp></local-cmp>

</div>

Js 部分：

var cmp = {

data: function () {

return {

status:'Critical'

}

},

template:'<p>Server status {{ status }} (<button @click="changeStatus">Change</button>)</p>',

methods: {

changeStatus(){

this.status = "Nomal"

}

},

};

var vm = new Vue({

el: "#app",

components:{'local-cmp':cmp}

})

评论(0) 浏览(3002)

102020-2

微信小程序入门——环境搭建以及开发工具的认识

seo达人

环境搭建

首先在微信公众平台注册一个我们自己的账号：

根据注册提示完成注册

用我们刚刚注册好的账号登录，进入微信官方文档界面，下载微信开发者工具
根据提示安装好就可以登录创建工程了！

开发工具的认识

开发工具的界面详解：

MINA框架：

js文件：页面中的逻辑界面；用于功能编写

wxml文件：配置页面元素及页面布局

wxss文件：样式文件，对页面进行美化【在文件夹中重写时，覆盖默认的页面样式】

json文件：页面的配置文件，例如tabBar的描述【在文件夹中重写时，覆盖默认的页面结构】

App文件：

App.js文件：用于注册一个小程序，并进行生命周期

App.json负责整个App的配置：

（1）pages：定义小程序的路由

（2）window：定义小程序的顶部菜单

（3）tabBar：定义小程序的底部Tab

（4）networkTimeout：定义小程序的超时

（5）debug：定义小程序的debug模式

App.wxss样式会被整个App的页面引用，公用css可以写在这里

创建工程

1.登录微信开发者工具，进行工程创建的信息填写

-项目名称必须与事先定好的路径最后一个文件名相同，如果没有，项目名称将会自动修改为路径里面最后一个文件名。若强行修改项目名称，则会出现一下错误，导致无法创建。
在微信公众平台找到我们的AppID，填在AppID的文本框内。也可以暂时使用测试号

3.创建完成后，根据需要就可以自己修改代码，完成自己的小程序编写了！

评论(0) 浏览(3222)

首页

事件冒泡和冒泡的阻止

Layui中使用ECharts

h5新增的表单标签

子类对象实例化全过程

CSS简单实现圣杯布局和双飞翼布局

关于javascript跳转与返回和刷新页面

弹性布局(Flex)+骰子旋转实例^v^

vue-router学习笔记

Vue (一）、创建组件

微信小程序入门——环境搭建以及开发工具的认识

分类

日历

链接

个人资料

存档