快速学会开发微信小程序

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

 

 

转发请注明出处! 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/402872.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

监听鼠标左右移动事件;所有dom事件列表

监听鼠标左右移动事件使用 mousemove 附带所有dom事件列表 <template><div><div>监听事件</div></div> </template><script> export default {data () {return {}},created () {// 定义鼠标事件处理函数document.addEventListener(…

关于Pac-Man,你所要了解的 一切

2019独角兽企业重金招聘Python工程师标准>>> 不论何时&#xff0c;它一直都是最伟大的游戏之一。这里有许多有关它的有趣的内幕&#xff1a;Pac-Man。 第一, 在一天之内重新创建Pac-Man 。 第二,对游戏种的每个鬼背后的人工智能的 一个非常详细的探讨 。 事实证明…

grunt入门 出处:http://artwl.cnblogs.com

grunt-contrib-uglify uglify是一个文件压缩插件&#xff0c;项目地址&#xff1a;https://github.com/gruntjs/grunt-contrib-uglify 本文将以一个DEMO来展示如何使用uglify插件。 DEMO环境 package.json: {"name": "grunt-demo","version": &q…

【推荐!!!】vue修改数据页面不更新;vue监听不到数据变化;vue打印有值页面无数据;this.$set ; this.$nextTick ; this.$forceUpdate

场景&#xff1a;vue是双向数据绑定的&#xff0c;那么在修改data数据时候&#xff0c;页面也应该是变化的&#xff0c;但是偶尔会遇到 1.vue修改数据页面不更新&#xff0c;既data数据变化了&#xff0c;但是页面渲染没变化。 2.或者vue监听不到数据变化&#xff1b; 3.vue打印…

探讨NDK编译错误ld.exe: Dwarf Error: mangled line number section.

如题所示的NDK编译错误是什么原因导致的&#xff1f;我的困惑今天在把WIN32下的一个工程移植到ANDROID时遇到上述错误&#xff0c;感到非常困惑。错误如下&#xff1a;D:/ndkr8/toolchains/arm-linux-androideabi-4.4.3/prebuilt/windows/bin/../lib/gcc/arm-linux-androideabi…

Visual Studio Code之常备快捷键

From: https://blog.csdn.net/u010019717/article/details/50443970 孙广东 2015.12.31 官方快捷键大全&#xff1a;https://code.visualstudio.com/docs/customization/keybindings Visual Studio Code是个牛逼的编辑器&#xff0c;启动非常快&#xff0c;完全可以用来代替其…

jquery中cookie用法实例详解(获取,存储,删除等)

这篇文章主要介绍了jquery中cookie用法,结合实例详细分析了jQuery操作cookie的获取,存储,删除等操作,并附带了Jquery操作Cookie记录用户查询过信息实现方法,需要的朋友可以参考下本文实例讲述了jquery中cookie用法。分享给大家供大家参考&#xff0c;具体如下&#xff1a; cook…

js计算日期差;js计算天数差

场景&#xff1a;首先要注意两种情况 1.只是计算年月日的天数差&#xff0c;例如2022-10-10 12:00:00与 2022-10-11 00:00:00 相差1天 2.计算包含时分秒的天数差&#xff0c;例如2022-10-10 12:00:00与 2022-10-11 00:00:00 相差0天 3.注意safari浏览器 将时分秒的转化为时间戳…

非常全的VsCode快捷键

From: https://segmentfault.com/a/1190000007688656 常用 General 按 Press功能 FunctionCtrl Shift P&#xff0c;F1显示命令面板 Show Command PaletteCtrl P快速打开 Quick OpenCtrl Shift N新窗口/实例 New window/instanceCtrl Shift W关闭窗口/实例 Close wind…

Iptables-Fail2ban处理bind 非法***

早上发现DNS流量有些异常&#xff0c;查了query.log日志如下: 9-Apr-2013 13:49:33.418 queries: info: client 199.19.213.88#25345: view other_user: query: isc.org IN ANY ED (183.60.126.74) 09-Apr-2013 13:49:33.475 queries: info: client 199.19.213.88#25345: view …

通过挂载系统光盘搭建本地yum仓库的方法

1、配置本地yum源&#xff08;挂载光盘&#xff09; mkdir /medir/cdrom(创建目录) mount /dev/cdrom / medir/cdrom (挂载到/ medir/cdrom目录&#xff09; 2、修改yum配置文件 3. 修改挂载路径/ medir/cdrom&#xff0c; 将gpgcheck1改为0 enabled0改为1. 4. yum list …

谷歌划词翻译

谷歌划词翻译是个谷歌插件 复制及时翻译很好用 插件下载地址 配置谷歌翻译方法

[tp5] thinkPHP5-渲染模板的方式

From: https://blog.csdn.net/Wake_me_Up123/article/details/76096174 默认情况下&#xff0c;控制器的输出全部采用return的方式&#xff0c;无需进行任何的手动输出&#xff0c;系统会自动完成渲染内容的输出。 在控制器里渲染模板 namespace app\index\controller;use t…

.net 预编译 提示中导入的类型 冲突

之所以会出现你遇到的这个问题&#xff0c;是因为项目引用了自身的Dll文件&#xff0c;系统就把项目本身和项目本身生成的DLl文件看成两个项目来对待&#xff0c;因为它们两个本身就是对等的&#xff0c;就会出现冲突的问题。解决办法很简单&#xff0c;就是去掉项目对自身的引…

如何对Javascript代码进行二次压缩(混淆)

如何对Javascript代码进行二次压缩&#xff08;混淆&#xff09; 对Javascript代码进行压缩&#xff08;混淆&#xff09;&#xff0c;可以有效减少传输和加载时间。但是&#xff0c;不是所有的变量&#xff08;方法&#xff09;都能被混淆的&#xff0c;一般来说&#xff0c;只…

vue项目添加百度统计

vue项目添加百度统计

如何在网页标题栏title加入logo(icon)图标?

From: https://www.cnblogs.com/lyp123/articles/5661661.html 打开某一个网页会在浏览器的标签栏处显示该网页的标题和图标&#xff0c;当网页被添加到收藏夹或者书签中时也会出现网页的图标&#xff0c;怎么在网页title左边显示网页的logo图标呢&#xff1f; 方法一&#xf…

教你如何在linux 下批量卸载

教你如何在linux 下批量卸载 最 近本来想在linux 下配置 JDK 6.0 用来开发java&#xff0c;然后遇到很多麻烦&#xff0c;一开始的时候屁颠屁颠的到SUN的网站去下载个 JRE 的bin 文件&#xff0c;这个文件比较小&#xff0c;几十MB而已&#xff0c;安装的时候它自动安装在 /usr…

Unity AssetBundles and Resources指引 (三) AssetBundle基础

本文内容主要翻译自下面这篇文章 https://unity3d.com/cn/learn/tutorials/topics/best-practices/guide-assetbundles-and-resources?playlist30089 A guide to AssetBundles and Resources 第三部分 AssetBundle基础 3.1概览 AssetBundles系统提供一种手段把一个或多个Asse…

vue项目启动成功浏览器不显示

场景&#xff1a;vue项目启动成功&#xff0c;无任何报错&#xff0c;但是浏览器却一直加载&#xff0c;页面始终是空白。 如果你的项目用到了element-ui的标签页组件el-tabs组件&#xff0c;那么大概率是此组件引起的浏览器卡死问题。 可以现将el-tabs的代码注释掉&#xff0c…