快速学会开发微信小程序

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

转发请注明出处！

快速学会开发微信小程序相关推荐

快速学会开发微信小程序教程
1.手机(微信-6.5.4以上) 编辑器(微信web开发+ egret) (editplus sublime)(webstorm dw)(visio eclipse zend phpstorm) 2. ...
如何快速上手开发微信小程序？
开发微信小程序其实很简单,对于初学者建议要首先了解一些前端开发的相关的知识(vue),比较熟悉html.css.JavaScript,还有就是要熟悉数据库的操作,基本的增删改查要会. 开发微信小程序快 ...
快速上手开发微信小程序（含npm包使用及mobx状态管理）
文章目录一.微信小程序的基本知识 #去除索引提示报错 1.wxml和html的区别 2.wxss和css区别 2.1 rpx的实现原理 3.小程序.js 二.小程序的宿主环境 1.运行机制 2.组件 ...
uni-app快速开发微信小程序、h5、和app
过年在家无聊,尝试使用uni-app开发微信小程序,发现这个框架的跨端功能非常强大,几乎能直接从vue移植过来下面是项目架构图应用截图技术栈: 后端 node +mysql 抓取各大视频网站的数 ...
开发微信小程序入门前
开发微信小程序入门前百牛信息技术bainiu.ltd整理发布于博客园 2016年09月21日晚微信发不了微信"小程序"的内测版,一时间整个互联网都炸了锅.个大新闻.论坛都在讨论 ...
python开发微信小程序-微信小程序开发：python+sanic 实现小程序登录注册
开发微信小程序时,接入小程序的授权登录可以快速实现用户注册登录的步骤,是快速建立用户体系的重要一步.这篇文章将介绍 python + sanic + 微信小程序实现用户快速注册登录全栈方案. 微信小程 ...
python开发微信小程序-Python 开发者的微信小程序开发实践
导读在知乎上,有人提问"如何使用 Python 开发微信小程序". 其实微信小程序作为一个前端的机制,Python 并不能插上边.只不过可以作为后端接口为微信小程序提供数据服务而 ...
mpvue 微信小程序_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全责编 | 阿秃转自 | 美团技术团队企业博客前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...
用Vue.js开发微信小程序：开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...

快速学会开发微信小程序

快速学会开发微信小程序相关推荐

最新文章

热门文章