从零开始做一个微信小程序的实战开发教程
发表时间：2023-09-12 08:27:21
文章来源：炫佑科技
浏览次数：123
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
从零开始做一个微信小程序的实战开发教程
经过近一年的等待，微信小程序终于正式发布了。 对于开发来说，以后可以申请创建自己的小程序。 那么如何申请微信小程序呢？ 下面小编就详细分享一个从零开始制作微信小程序的实用开发教程。 我希望这些步骤对早期开发有所帮助。
微信小程序开发步骤
申请微信小程序前的准备工作：
首先，您需要注册一个小程序账号。 您需要使用未注册公众账号的邮箱地址进行注册。 注册过程需要很多认证，相当繁琐。 如果您暂时只是试水，没有发布计划，则只需填写基本信息即可，无需完成微信认证。
之后您就可以使用注册的公众平台账号进行登录。
然后，点击主页面左侧列表中的“设置”，然后在“设置”页面中选择开发设置”，即可看到AppID。 AppID可用于在开发工具中注册并使用开发工具的高级功能。 您可以从官方网站下载开发工具。
启动项目：
打开开发工具，选择小程序选项，然后直接点击“添加项目”按钮。 这一步我们可以填写刚才注册时使用的AppID。
如果工程目录下的文件为空文件夹，则会提示是否创建快速启动工程。
选择“是”，开发工具会帮我们在开发目录下生成一个简单的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上，小程序的逻辑代码在App中运行，而在iOS上，这个任务交给X5内核来完成。
在开发工具上，小程序的代码运行在NW.js（内核）中。 这也导致了开发工具上的效果与实际效果存在差异。
2. 组件
微信提供的组件很多，主要分为八类：
这包括常用的组件，例如视图、视图和表单以及地图。
组件主要属于视图层，通过WXML进行结构布局，类似于HTML。 样式通过WXSS定义和修改，其语法和用法与CSS类似。
组件使用语法示例：
3.API
网络
媒体
数据
地点
设备
界面
开发接口
网络请求接口包括普通的HTTPS请求，支持上传、下载，基本满足我们开发中需要的网络需求。
这些API属于逻辑层，写在JS逻辑文件中。
用法示例：
wx.({ 类型: 'wgs84', : (res) { var = res.var = res.var speed = res.speed var = res. } })
其他API的使用方法可以到官方文档-API查看。
编译并运行
1.模拟器调试
我们可以使用模拟器在微信提供的开发工具中查看小程序的效果。
之前我们提到过从零开始做一个微信小程序的实战开发教程，小程序运行的底层不同，这也导致了在模拟器上的效果和在手机上的效果有些不同。
2. 真机调试
在左侧选项栏中，选择该项目微信小程序开发的公司，然后单击“预览”。 将生成一个二维码。 用管理员微信扫一下，就可以看到真机上的实际效果。
实战：运行小程序
真机运行截图（运行于，微信版本：6.3.30）：
首先实现一个定时器用于计时，通过wx.获取坐标，将获取到的坐标存储在数组中，每隔一段时间通过坐标获取里程，累加得到总里程，同样将坐标点连接起来。 问题：
由于目前还没有办法在地图上绘制连接线，所以我采用了在地图上粘贴小红点的方法来显示大概的运行路径，比较粗糙；
虽然使用API中的火星坐标GCJ02类型，但得到的坐标与国际坐标相似，仍然存在偏差。
我已经把所有的代码都放在上面了。 您可以下载并查看或先启动它。 后续我会做一些优化更新。 现在只是一个学习demo，大家交流学习，实际应用还需要更多优化。
