快速学会开发微信小程序

ゞ浴缸里的玫瑰 2022-05-19 01:55 267阅读 0赞

From: [https://www.cnblogs.com/juaner-hlj/p/6628148.html][https_www.cnblogs.com_juaner-hlj_p_6628148.html]

**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 项目  
文件夹为非空的话 就按照原目录结构导入

转发请注明出处！

[https_www.cnblogs.com_juaner-hlj_p_6628148.html]: https://www.cnblogs.com/juaner-hlj/p/6628148.html