• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

快速学会开发微信小程序

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

 

 

转发请注明出处! 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
解决小程序swiper层级太高问题发布时间:2022-07-18
下一篇:
微信小程序开发者工具下载及安装发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap