微信小程序如何申请 微信小程序开发步骤介绍【详解】
微信小程序怎么申请_微信小程序开发教程 等来近一年，微信小程序终于正式发布了，对于开发者朋友来说，今后都可以申请创建自己的小程序。那么微信小程序怎么申请?下面小编详细分享下从零开始做一个微信小程序的实战开发教程，希望操作步骤，对初期开发者会有所帮助。
微信小程序开发步骤
微信小程序申请前的准备：
首先，你需要注册一个小程序账号。需要用一个没注册过公众号的邮箱注册。注册过程中需要很多认证，比较繁琐。如果暂时只是试水、没有发布的打算，那么只要完成基本信息填写就可以，不需要完成微信认证。
之后，就可以在公众平台使用注册的帐户进行登录。
然后，在主页面左边列表中点击设置，再设置页面中选开发设置，就可以看到AppID。而AppID 可以用于在开发工具中进行登记，使用开发工具的高级功能。你可以到官网下载开发工具。
开始项目：
打开开发者工具，选择小程序选项，然后直接点击「添加项目」按钮。我们可以在这个步骤，填入刚才注册的时候使用的 AppID。
如果项目目录中的文件是个空文件夹，会提示是否创建 quick start 项目。
选择「是」，开发者工具会帮助我们在开发目录里生成一个简单的 Demo。
这个 Demo 拥有一个完整的小程序的大概框架。
1. 框架
我们首先看一下官方提供的 Demo 含有的目录：
app.js：小程序逻辑、
生命周期、全局变量。
app.json：小程序公共设置、导航栏颜色等，不可以注释。
app.wxss：小程序公共样式，类似 CSS 。
小程序页面构成类似这样：
每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json
微信小程序中的每一个页面的路径和页面文件名，都需要写在app.json的pages中，且pages数组中的第一个页面是小程序的首页。
这四个文件按照功能可以分成三个部分：
配置：json 文件
逻辑层：js 文件
视图层：wxss.wxml 文件
在 iOS 上，小程序的逻辑代码运行于 JavaScriptCore 中，而在 Android上，这个任务则是交给 X5 内核来完成。
在 开发工具上， 小程序的 JavaScript 代码是运行在 NW.js(Chrome 内核) 中。这也导致开发工具上的效果跟实际效果有所出入。
2. 组件
微信提供了许多组件，主要分为八种:
这其中，包含了view、scroll-view、button、form等普通常用的组件，也提供了地图mapcanvas
组件主要属于视图层，通过 WXML 来进行结构布局，类似于 HTML。样式则通过 WXSS 来定义和修改，它的语法和使用都近似 CSS。
组件使用语法实例：
3. API
网络
媒体
数据
位置
设备
界面
开发接口
网络请求接口包含了普通的 HTTPS 请求，支持上传、下载、Socket，基本上满足了我们开发中所需要的网络需求。
这些 API 属于逻辑层，写在 JS 逻辑文件中。
使用实例：
wx.getLocation({ type: 'wgs84', success: function(res) { var latitude = res.latitude var longitude = res.longitude var speed = res.speed var accuracy = res.accuracy } })
可以到官方文档 – API 查看其它 API 的使用方法。
编译运行
1. 模拟器调试
我们可以在微信提供的开发者工具中，使用模拟器查看小程序运行的效果。
之前我们提过，小程序的运行底层不同，这也导致在模拟器上的效果，会与在手机上运行有些差异。
2. 真机调试
在左边的选项栏中，选择项目，然后点预览会生产一个二维码，用管理员
微信号扫一扫，就可以在真机上看实际效果。
实战：跑步小程序
真机运行截图(运行于
iPhone 7，微信版本：6.3.30)：
首先实现一个
计时器进行 计时，通过wx.getLocation获取坐标，把获取到的坐标存在一个数组中，通过坐标每隔一段时间获取里程，进行累加得到总里程，同时也通过坐标点进行连线。存在的问题：
因为目前找不到在地图上画连线的方法，所以采用了在地图上贴小红点图的方法显示大概跑步路径，路径比较粗糙;
虽然采用了 API 里面的火星坐标 GCJ02 类型，但是获取的坐标跟国际坐标差不多，依然存在着偏差。
我已经把全部代码放在 GitHub 上，大家可以下载来看看或者先 Star 起来，我以后还会进行一些优化更新。现在只是一个学习 Demo，大家沟通学习，实际应用还需更多优化。
(0)
(80)
分享
网友评论
通行证登录注册|
QQ微博淘宝微信
修改头像
注：所有评论通过审核后才会被公开。
表情@作者发表评论
暂无评论，快来抢沙发！
相关内容
微信小程序如何申请 微信小程序开发步骤介绍【详解】 怎么做一个微信小程序 微信小程序怎么样 微信小程序怎么进入 微信小程序进入方法【图文教程】 微信小程序个人怎么注册 微信小程序个人注册方法 微信小程序个人怎么注册 微信小程序个人能注册方法 微信小程序收款通如何设置 微信小程序收款通知设置方法【详细介绍】 支付宝小程序公测资格如何申请 支付宝小程序公测资格申请【步骤】 微信小程序怎么使用 微信小程序是什么【详解】 微信小程序怎么使用 怎么找到微信小程序【详解】
最新文章
Win10
应用商店无法联网怎么办 Win10应用商店无法联网解决方法 电脑只有光标在左上角闪烁无法进入系统 电脑无法进入系统解决方法 按F1才能进系统怎么办 电脑开机按f1才能进入系统解决办法 Win10蓝屏代码memory management怎么办 Win10无法输入中文怎么办 Win10无法输入中文解决方法 Win10没有有效ip配置怎么解决 Win10有效ip配置方法 Win10电脑开机提示“no bootable device”解决方法 Win10网络重置后连不上网怎么办 网络重置之后无法连接网络解决方法 Win10无法更新怎么办 Win10错误代码0x80240fff解决方法 电脑鼠标间歇性卡顿怎么办 鼠标卡顿原因及解决方法
最新更新栏目
|办公软件教程专区|电脑疑问专区|网络词汇百科|12306百科|camera360专区|超级课程表专区|豆瓣FM专区|京东网专区|美拍专区|陌陌专区|
网易云音乐专区|易信专区|Win10专区|网购问题技巧专区|百度输入法专区|
优酷专区|Linux专区|迅雷快传专区|
YY语音专区|360手机助手专区|360云盘专区|PPS影音专区|百度音乐专区|
百度云专区|Win8.1专区|拉卡拉专区|电脑问题专区|支付宝专区|百度专区|淘宝网专区
IT热词
微信公众平台登录
海马苹果助手支付宝提现要手续费吗支付宝转账要手续费吗微信群发怎么发路由器地址电脑如何
重装系统我的世界盒子叮叮约车西瓜播放器 叉叉助手官网逗趣直播 果宝三国 企鹅电竞
大家都在搜
⋅
手机号码定位精确吗？手机号码怎么定位？ 手机号码定位精确吗
⋅ 以“人民”的名义忽悠人民？这APP的路子有点野
⋅ 春季数码大放价 扫码进群更优惠
⋅ 放下你的手机！它可能和你没戴口罩一样危险
⋅
90后爱逛的这些平台 莆田系广告已经安排上了