快速学会开发微信小程序
1.手机（微信-6.5.4以上） 编辑器（微信web开发+ egret）
（editplus sublime）
（webstorm dw）
（visio eclipse zend phpstorm）
2.是什么
即用即删，无需安装的程序
-宿主 微信中 （网页-->浏览器）
-类似前端（html css js）
-语言 (wxml wxss js json)
-1M
微信-通讯录-发现（小程序）-我
搜索: 北京薪资计算器
小小房贷计算器 汇率助手
京东 携程 去哪儿
饿了么 美团
查地铁 车来了 摩拜单车
。。。
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 标记 <div></div>
view image text map canvas form
微信发明这种语法的原因 微信里面结构没办法更新
if
if else
if else if else if else if.... else
<text wx:if="{{kk}}">fds</text>
删除节点 添加节点
for wxml杂糅
遍历 数组
遍历数组对象
block 空标记
8. 事件： 事件列表
<view bindtap="dd">fsd</view>
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 项目
文件夹为非空的话 就按照原目录结构导入
转发请注明出处！
