快速学会开发微信小程序教程

1.手机（微信-6.5.4以上） 编辑器（微信web开发+ egret）

（editplus sublime）

（webstorm dw）

（visio eclipse zend phpstorm）

2.是什么

即用即删，无需安装的程序

-宿主 微信中 （网页–>浏览器）

-类似前端（html css js）

-语言 (wxml wxss js json)

-1M

微信-通讯录-发现（小程序）-我

搜索: 北京薪资计算器

小小房贷计算器 汇率助手

京东 携程 去哪儿

饿了么 美团

查地铁 车来了 摩拜单车web前端开发直播教程Q-q-u-n： 767273102 ，内有免费开发工具，零基础，进阶视频教程，希望新手少走弯路

。。。

3.为何

-小 1M ，app 45M

-流量大 推广成本低

4.怎么做

-外网 微信web开发- pages ；utils； app.js ；app.json； app.wxss

-无外网egret

-editplus

5.1文件组成

• pages 微信小程序页面

index/index.wxml=== xml文件（html 规定好的标记集合）

view ===== div {{kk}}

text ===== span

image==== img src

index/index.wxss

所有的css的规则都可以写

index/index.js

Page({

data:{ kk:00 }

事件列表 默认 自定义

})

index/index.json {} 其实就是外边app.json的window键

• utils 工具

app.js 项目js

window.alert()

App({}) App 内置函数

事件 全局的值

app.json 项目json配置:配置名字、导航样式、注册页面、网络、调试

{

"pages":[

"pages/kk/kk",

"pages/ul/ul"

]，

"window":{

"":

}，

"networkTimeout":{} ,

"tabBar":{

"list":[{},{}]

}

"debug":true

}

app.wxss 全局css文件----默认样式表 每个页面默认引入app.wxss 和 自己的.wxss 公共样式放到app.wxss 单独页面样式放入 自己的.wxss

wxss weixin stylesheet

wxml weixin markup language

帮助手册： mp.weixin.qq.com

5.2json 和js对比

js-----var a={name:80, /*名字*/age:20,ss:function(){}}；

json-----{

"name":80,

"age":20

}

5.3 如何写静态文本 标记中内容wxml

动态文本 {{dd}}wxml 对应的js文件中 data里面写key

(插播)5.4 flex 盒子

css3 flex盒子 解决浮动问题

父亲： display:flex; 让儿子飞起来

justify-content:space-between

flex-direction:column

align-items:center

5.5 事件

bindtap==== onclick

view bindtap=“abc”

页面.js 文件中 添加一个Page({ abc:function(){ }})

没有DOM 没有window

document HTMLDivElement HTMLUlElement

event event.target 此路不通 e里面target数据太少了

5.6小程序修改ng变量的值

this.setData({

aaa:"df"

})

5.7 如何传递参数

data-xx="0"

chg:function(e){ console.dir(e);

e.target.dataset.xx

}

5.8如何修改css的值

"icon phone"

style="color:#f00"

style="color:{{dd}};background-color:{{kk}};"

class="one a" one b

data:{ dd:"#f00"}

chg:function(){

this.setData({

dd:"#00f"

})

}

5.9 设置值的时候 少用this 用that

var that=this;

that.setData({})

5.10 获取网页里面的值的时候

var k=ele.innerHTML

var k=this.data.key

this.setData({ })

5.11 定时器

setInterval 循环（瞬时 cpu两级 20ns）

6.注意事项

补充：

调试面板 console .log dir

wxml elements

7.wxml特殊语法

html 标记

view image text map canvas form

微信发明这种语法的原因 微信里面结构没办法更新

if

if else

if else if else if else if… else

fds

删除节点 添加节点

for wxml杂糅

遍历 数组

遍历数组对象

block 空标记

8. 事件： 事件列表

fsd

bindtap 轻触

bindlongtap 长触

bindtouchstart e e.changedTouches e.touches

changedTouches 存储手指信息 变动手指

clientX clientY 视窗偏移

pageX pageY 页面偏移

touches 屏幕上 手指数量

bindtouchmove 触摸移动

bindtouchend 触摸结束

bindtouchcancel 触摸中断

page({

dd:function(e){ }

})

9.API

wx.XXX({

key:90,

key:34,

success:function(res){

嵌套其他的接口

},

fail:function(){}

})

10. 发布

登录—设置–开发设置 appID

开发管理 --提交审核 --7天左右

项目–上传

小结：

导入项目 egret生成的 添加项目时候 添加是一个非空目录 那么相当于导入

文件夹为空的话 就新建helloWorld 项目

文件夹为非空的话 就按照原目录结构导入