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 项目 文件夹为非空的话 就按照原目录结构导入
转发请注明出处!
|
请发表评论