为什么我的如何创建微信小程序序开发工具没有重启的控制键呀

前言:新人第一坑跳坑指南:修改后,必须保存;ctrl+S;

4:设计资源下载:资源下载

5:如何创建微信小程序序公测接入指南:

6:如何创建微信小程序序支付文档:

10:从注册箌上线系列:

1:不了解如何创建微信小程序序的同学请先搜索一下如何创建微信小程序序究竟是什么,有哪些特性;

2:有htmlcssjs基础者可以直接进入实践边实践边学习,尤其是有react与vue基础的;

3:如何创建微信小程序序不需要特别申请(认证或账号)即可开始使用工具开发;

4:如哬创建微信小程序序是需要后台的不限定任何语言,提供小程序接口要求的json格式即可;

5:初次开发者推荐阅读新手跳坑系列,有几个坑先了解一下,遇到时便可以查阅了;

6:如有作者不希望自己的作品被放置在这里请联系我删除;

7:如果遇到问题,推荐多使用搜索对帖子及文章进行搜索;

如何创建微信小程序序大事记编年史:旨在让大家独立去思考变化的意义:(日期非精确,仅为大致日期)

12月21ㄖ:如何创建微信小程序序开放新增功能:分享自定义模板消息,客服消息扫一扫;

12月30日:微信开放带参数二维码,允许已上线的小程序制作进入任意页面的二维码;

1月9日:微信开放如何创建微信小程序序;

1月22日:微信增加社交分类允许提交社交类小程序,但是必须具备社交相关的资质证书;

1月25日:微信开始允许直播类小程序上线上线的有腾讯now直播,企鹅电竞等;

2月1日:微信开放微信搜索在微信搜索结果内将可以直接展示小程序,并且位置是第一位;但是仍需全名搜搜方可显示;

2月10日微信开放部分关键词的模糊搜索显示,包括表情、美食、音乐、电影、读书、日记、计算、股票、日历、电商、酒店、出行、汽车、旅行、快递等领域;

2月19日:微信开发者社区从封閉状态改为开放状态,任何人均可浏览;

2月23日:摩拜单车宣布原二维码也可以适用于小程序使用微信扫一扫扫描摩拜单车二维码将直接打开小程序;

3月2日:微信公开课征集小程序案例

3月5日:马化腾回记者问中提出:小程序是面向未来的产品:马化腾:微信为什么力推小程序?微信公众号会推付费内容吗 ...

3月27日,微信官方宣传六大变化:

3月27日:微信官方宣传支持个人注册:

3月30日:附近的小程序:

4月14日:微信开放长按识别小程序二维码功能;

5月8日:开放群ID接口可获取群ID和群名称

5月10日:开放“附近小程序”

5月12日:上线“小程序数据助手”,支持实时查询小程序数据

5月19日:新增页面内转发功能;支持接入微信运动步数数据等

5月27日:小程序码生成数量无限制;用户画像支持分析尛程序数据

6月1日:公众号群发文章通过文字或图片链接打开小程序功能

6月3日:小程序新增推广功能支持自定义关键词

    如何创建微信小程序序项目总结系列:作者:Tong_T,博客地址:Tong_T的博客 - 博客频道 -

    开发前必读简要 基于大量无效开发无法上线的案例,所以开发前部分知识十分偅要;|

    如何创建微信小程序序个人注册简单步骤 打开点击右上角立即注册,进入小程序注册|

    微信开发者工具【项目】详解 为什么我的小程序通过审核但是搜索不到呢?原因是必须在后台内点击发布才会发布;|

    小程序开发上线(发布)步骤 这篇帖子将简单的介绍基本的步骤,以便新手们建立一个基本的印象;|

    从零开始:如何创建微信小程序序新手入门宝典 为了方便大家了解并入门如何创建微信小程序序我将一些可能会需要的知识,列在这里; |

    安卓或ios开发者学习小程序指南 我发现很多安卓或是ios开发者学习了小程序的开发,并且很顺利 |

    WXSS/CSS相关知识说明 为了更适合开发如何创建微信小程序序,WXSS对 CSS 进行了扩充以及修改|

    使用官方WEUI-WXSS相关知识 使用官方 UI 简化设计开发流程,如果你嘚项目对 UI 定制要求不是很高的话|

    常用api域名配置列表及免费API集合 免费API大全以及后台配置域名的方法|

    一键添加小程序所有文件jswxmlwxssjson升级到新版后鈳以“一键”新建小程序4个常用文件,不用一个一个的去建方便多了!|

    让他人体验自己的小程序 怎么让别人体验自己的小程序啊,我认為这个将是很多朋友即将遇到的问题|

    官方社区使用指南 为了让大家解决问题更有效率官方社区是必不可缺的。|

    如何让如何创建微信小程序序更容易审核通过 如何创建微信小程序序审核不通过有很多原因,其中最明显的一点就是:服务类目问题;|

    审核提供测试账号 自有账號体系 提交审核怎么提供测试账号|

    关于如何将大神demo应用于自己项目 把大神们造轮子的逻辑应用于我们项目的相应组件上这就是基本思路,有思路才能优雅 |

    使用本地服务器进行调试 怎么请求本地网络啊 IP形式的网络怎么访问本地架设的服务器?|

    开发者工具无法登录账号 最近開始频发无法登录账号的问题诸如request https 404报错 登录态失效等 |

    小程序敏感词汇过滤问题 用户需要发表内容的小程序,需要设定关键词过滤屏蔽掉政策不允许的内容:|

    公众号关联如何创建微信小程序序简单方法 很多人可能会问,公众号如何添加如何创建微信小程序序呢步骤很简單: 1: |

    无法长按识别及无法分享到朋友圈的替代方法 看到 同学发了一个花样二维码,我看了之后顿时来了一个灵感。。 |

    使用PHP/thinkphp后端问题 後端部分跟小程序的前端部分是分离的 |

    使用java后端问题说明 请求数据方面没有区别只需要提供json格式的数据接口即可;但是因为小程序方面對其他|

    使用nodeJS作为小程序后端node用的人很多啊。稍微聚集一下相关的知识|

    使用C#解密用户信息 由于官方没有提供C#的解密demo,所以大家只能八仙过海各显神通了。 |

    使用第三方SDK及服务及扩展库及框架 目前已经为小程序开发了SDK及可以辅助开发的库或框架或SDK|

    使用第三方库(第三方js) 小程序怎样引用第三方js呢?第三方js是封装好的类库 想引用进来实例化使用|

    使用第三方编辑器(IDE开发小程序并非一定要使用官方的编辑器,伱也可以任意选择自己喜欢的编辑器;|

    模块化、组件化及封装 开发过程中要学会不断的重构代码尽量提高代码的可重用性,尽量不要复淛相同的代码|

    参数传递,跨页面传值或通讯相关知识 这个东西是开发小程序必备神器,越深入了解越可以有效的帮助自己|

    图表类:折线图,柱状图K线,分时图 各类图表功能小程序自带API并没有提供,所以很多人就用了其他方法来实现|

    富文本解析:将html转为为wxml富文本解析是一个困扰无数人的问题,目前网上的解决方案已经比较多了 |

    自定义字体/自定义图标相关 自定义图标及自定义字体一直是很多小程序开发者的心病|

    如何创建微信小程序序真机预览跟本地不同的问题 本地可以看到数据,打开调试也可以看到数据关闭调试则看不到数据;或是开发版可以看|

    常见错误及基本排除方法 也接触了不少人解决问题的过程里,有一些比较难以排查的可能性列举在这 |

    ios苹果真机相关问題 此问题只在ios上出现而安卓没有问题;或是这个问题同时在安卓和ios上出现;|

    Android安卓真机相关问题 本帖特别针对以下两个情况:情况一:此問题只在安卓上出现,而ios没有问题;|

    Javascript 标准库兼容性及ES6支持度说明iOS、Android 和 开发者工具三端的脚本执行及用于渲染非原生组件的环境是各不相哃的|

    小程序1024K限制及代码压缩相关 为了提升小程序体验流畅度,编译后的代码包大小需小于 1MB 大于 1MB 的代码包将上传|

    如何创建微信小程序序支付(微信支付签名错误 发起支付时的签名需要有appId(不是appid,大小写)|

    微信支付(如何创建微信小程序序支付) 小程序仅支持微信支付;而微信支付需要认证后才可以使用,需要花费300元认证费用;|

    微信登录问题 有个登录功能为什么小程序在别的手机上无法登录?|

    用户未授权获取登录信息的替代方法 用户如果拒绝授权需要10分钟等待后才可以再次申请授权;|

    授权获取用户信息的弹窗 授权获取用户信息窗口在开发工具可鉯多次提示,在手机上测试的时候只弹出一次这是正|

    解密获取unionid问题unionid,需要 先在微信开放平台内绑定小程序;方可解密出unioni|

    带参数二维码,返回数据保存为图片phpjava,nodeC#等保存为图片的方法|

    带参数二维码相关知识 生成的数量有限制,总共只有10万个;另外扫码访问次数没有限淛。|

    MD5加密使用说明 聚集一下md5加密在小程序中的使用相关的内容: |

    页面路径五层限制 官方规定页面路径只能是五层请尽量避免多层级的交互方式。|

    wx.uploadFile(上传文件)相关问题 特别提示一:upload必须在小程序公众后台配置上传域名才可以在真机使用。|

    图片上传问题 域名检测全部是正確的并且后台也配置了域名,但是安卓就是无法上传图片:|

    模板消息相关问题说明 当用户在小程序内完成过支付行为可允许开发者向鼡户在7天内推送有限条数的模板消息|

    客服消息相关(客服按钮修改 客服按钮能自己定义吗?可以的|

    swiper轮播图组件1:如何上下滚动;2:如何点擊;3:如何自定义指示点|

    分享相关 知识onShareAppMessage只有定义了此事件处理函数右上角菜单才会显示“分享”按钮|

    模态弹窗wx.showModal及遮罩层 带有输入框的弹窗|

    如何创建微信小程序序缓存API相关知识 关于数据缓存,怎么能获取到本地缓存使用了多少还剩多少|

    map组件,地图使用相关问题 包括百度地圖腾讯地图,高德地图api及各种地图相关demo|

    WebSocket相关问题说明 请保证wss域名符合https的要求;比如备案不得带有端口等;|

    音频相关问题:播放,录音等相关 包括语音识别类demo及教程|

    录音文件格式为silk(silk转mp3) 暂不支持模拟录音手机上录音目前是silk格式。如何转为mp3困住了不少人|

    语音搜索及语音識别相关 这属于小程序框架体系之外的功能可以将语言传给第三方服务器进行识别|

    progress进度条及slider凑合看吧,比如自定义圆形进度条。|

    radio单選(单项选择器 文章及demo可能并非是radio的使用说明,而是实现了自定义了单选等;|

    组件系列:scroll-view实现滑动及锚点功能|

    组件系列:textarea textarea可能出现的问题伍花八门请做好心理准备| input组件 坑点较多。。|

    重力感应及罗盘API开始搞摇一摇了。|

    计时器/倒计时相关 倒计时,计时器等组件使用说明|

    text組件文本换行及空格 总结一下text组件,以及文本换行文本溢出及空格,复制问题;|

    animation动画相关问题 本帖主要是针对animation的使用相关的教程及问題说明|

    toast吐司组件问题说明(自定义toast) 包括自定义toast等问题说明|

    picker及picker-view组 用途广泛的联动选择器目前已经比较实用了;|

    tabbar相关问题说明 包括tabbar不显示,自定义tabbar等问题的说明|

}

小程序与传统HTML5的区别

小程序刚开放公测互联网圈内开始了各种解读和猜测。其中有观点认为小程序和HTML5有着紧密关联甚至小程序就是基于HTML5开发。 
经过仔细研究文档和代碼开发从视图层的角度来说,小程序与传统HTML5还是有明显的区别主要区别在于:

  1. 开发工具不同。 
    区别于H5的开发工具+浏览器Device Mode预览的模式尛程序的开发基于自己的开发者工具,可以实现同步本地文件+开发调试+编译+预览+上传+发布等一整套流程

  2. 开发语言不同。 
    小程序自己开发叻一套WXML标签语言和WXSS样式语言并非直接使用标准的HTML5+CSS3。

  3. 组件封装不同 
    小程序独立出来了很多原生APP的组件,在HTML5需要模拟才能实现的功能小程序里可以直接调用组件。

如何创建微信小程序序的开发工具基于MINA框架(现已取消该名称),现在官方公布的工具名为微信web开发者工具小程序开发工具是一种基于Native System系统层的框架,由于并非运行在浏览器中所以JavaScript在web中的一些诸如Document、Window等方法无法使用。 
从执行的速度方面普通HTML5和小程序有哪些不同呢,用一张图表简单表示下:

  • 传统HTML5在加载的时候受限于网络环境需要顺序加载HTML、CSS、JS,然后返回数据最后渲染页媔显示在浏览器中。用户经常需要等待很长时间体验会受到影响。

小程序的这种优化策略可以减少用户的等待时间、加快小程序的响應速度。

WXML在语法上更接近XML语言遵循SGML规范,区别于HTML语言随意的标签闭合方式WXML语言必须包括开始标签和结束标签,以image标签为例以下2种写法都支持:

这里需要注意的是: 
所有组件与属性都是小写,以连字符-连接

WXML提供两种文件引入方式,import和include区别在于:import可以引入定义好的template模板,模板是有作用域的;而include就是拷贝一个公用的代码片段到目标文件中适合做公共页面片的拆分。

文件引入在小程序做模块化拆分的过程中非常重要

WXSS支持的单位有px、rem和rpx,其中rem和rpx可以针对屏幕容器进行适配px则为固定尺寸。 
建议:开发如何创建微信小程序序时设计师可以鼡 iPhone6 作为视觉稿的标准 
所以工程师拿到750的设计稿,在PS中量取的容器大小可以直接定义为rpx,不需要进行2倍尺寸的换算

备注:rpx的单位不光茬样式中会自适应,写在WXML的style里也会根据屏幕自适应

看到很多文章说小程序不支持样式的@import,其实官方公布的第一个正式开发者工具就已经支持了

不过官方并不推荐级联的这种写法,因为考虑到后面切Native的扩展可能会没办法支持级联选择。 
所以保险起见不建议.class-a .class-b{}这种级联的寫法,以免后期工具过滤导致页面错乱

小程序在0.10.102800的版本中加入了 textarea,并即将废弃操作反馈的系列组件 
我们简单通过一个表格来对比下HTML5和尛程序的组件标签的区别;

下面一一来分析下: 

除了text文本节点以外的其他节点都无法长按选中。 
截止到0.10.102800的开发者工具text支持嵌套text,不过有class嘚text会被面板过滤样式不影响。

icon可以直接用微信组件默认的图标默认是iconfont格式的,从WeUI那边沿袭过来的一种做法 
目前来看,市面上还没有佷好的自动合并单个svg为svg sprite的工具需要手动拼图。

picker默认支持普通、日期和时间三种选择器 
picker通过bindchange事件来调取range中自定义的数据数据,并展示到頁面中调用的是系统原生的select。 
这里小程序废弃了select组件考虑到的是这个组件的交互不适合移动场景,最终用picker代替了

在小程序开发工具裏,默认打开新页面工具左上角有返回按钮。加上redirect当前页打开,不出现返回按钮

默认image的高宽是320*240。必须通过样式定义去覆盖这个默认高宽auto在这里不生效。(开发者说这样设置的原因是:如果设置 auto 页面布局会因为图片加载的过程有一个闪的现象(例如高度从 0 到 height ),所鉯要求一定要设置一个宽度和高度) 
最新的api支持获取图片的高宽。不过这里返回的高宽是px单位不支持屏幕自适应; 
图片包括三种缩放模式scaleToFill、aspectFit、aspectFill和9种裁剪模式,三种缩放模式的实现原理对应如下:

额外补充下button的实现方式button的边框是用:after方式实现的,用户如果在button上定义边框会絀现两条线需用:after的方式去覆盖默认值。不过这个应该会在最近的开发者工具中修复

除了官方公布的小程序的组件之外,有一些标签比洳span、em、strong、b也是支持的,只是官方并不推荐使用

  • 在iOS平台上,微信的浏览器渲染内核是wkwebview;

  • 而在Android平台上微信则采用了腾讯QQ浏览器2016年4月份发咘的X5内核(blink内核)作为渲染引擎。

  • 在小程序的开发工具上小程序的JavaScript是运行在chrome内核(nwjs)中。


上图为OM小程序的开发界面下面我们从布局、智能裁图和loading动画几个方面简单说下OM小程序具体的UI开发经验。 


以上图om的文章列表为例文章的形态包括纯文字的和图文混合的。图文混合的攵字不管是1行还是2行都需要相对于图片纵向居中用flex的布局,就可以实现这3种状态不修改CSS文件只按需隐藏DOM结构就搞定。

在做传统H5的时候为了兼容各种低端设备的机型,通常不太敢轻易尝试flex但在小程序里就可以大胆的使用了。

正是由于小程序把图片处理成背景图片OM的素材管理页面图片的实现方式在这里遇到了一个挑战。 
简单列举下om各种不同尺寸图片在平台上的展示方案

这种方案,用css和img实现起来只需要设置外层盒子最大高宽,图片自适应缩放即可

然而因为小程序里是用背景图片的方式,简单的css设置并不能实现智能裁图的方案需偠配合js计算出不同尺寸图片对应的适配尺寸。

这里需要后台接口提供数据列表的图片高宽js对拿到图片的不同尺寸进行算法计算,重新赋徝再返回给数据

  1. 如何创建微信小程序序集成了很多原生APP的组件,从体验和页面流畅度来说都会比HTML5要优秀很多。

  2. 如何创建微信小程序序楿对于HTML5开发来说除了熟悉API需要学习成本之外,开发难度指数3颗星还是很容易上手的。

  3. 开发者工具、组件和API目前刚刚对外公测还不算呔成熟,里面还有很多坑需要开发者去填

文章篇幅有限,在这里只能简单从UI开发角度介绍下小程序的开发经验有关小程序的更多API,可鉯查阅小程序开发文档  
由于开发工具一直在持续更新,文章中可能会有不准确或者更新不及时的地方还请谅解。 


}

我要回帖

更多关于 如何创建微信小程序 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信