微信小程序-从零开始制作一个跑步微信小程序

一、准备工作

1、注册一个小程序账号,得用一个没注册过公众号的邮箱注册。
2、注册过程中需要很多认证,有很多认证,比较繁琐,如果暂时只是开发测试,不进行提审、发布的话,只要完成营业执照号填写就可以了,不需要完成微信认证。
3、注册完账号,登录,在主页面左边列表中点击设置,然后再设置页面中选开发设置就可以看到AppID,用于登录开发工具。

111819750-f342547cf1916b3d

主页面
121819750-c0d366994ea28442

设置页面

二、开发工具

可以到官网下载开发工具下载

131819750-9ce9b25dc71dfb83

开发工具
141819750-0f9c4f9eac30544c

开发工具编辑页面

三、开始项目

打开开发者工具,选择小程序选项,到达添加项目页面

151819750-e2a326972dde6bcd

添加项目

这个时候在前面设置页面的AppId就用到了。

如果项目目录中的文件是个空文件夹,会提示是否创建quick start 项目。
选择“是”,开发者工具会帮助我们在开发目录里生成一个简单的 demo。
这个Demo拥有一个完整的小程序的大概框架。

1、框架

先看下一目录:

161819750-b32bd589f698dac4

文件目录.png

app.js: 小程序逻辑,生命周期,,全局变量
app.json: 小程序公共设置,导航栏颜色等,不可以注释
app.wxss :小程序公共样式,类CSS 。

小程序页面构成:
171819750-ebee0fd2b89a187c

页面构成

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。

181819750-94ea900bb2e12460

葛文佳介绍

微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。

191819750-c1940a47c64725df

路径

这四个文件按照功能可以分成三个部分:

配置:json 文件
逻辑层:js文件
视图层:wxss.wxml文件

在 iOS 上,小程序的 javascript 代码是运行在 JavaScriptCore 中
在 Android 上,小程序的 javascript 代码是通过 X5 内核来解析
在 开发工具上, 小程序的 javascript 代码是运行在 nwjs(chrome内核) 中。所以开发工具上的效果跟实际效果有所出入。

2、组件

微信提供了许多组件,主要分为八种:

视图容器、
基础内容、
表单组件、
操作反馈、
导航、
媒体组件、
地图、
画布

包含view、scroll-view、button、form等普通常用的组件,也提供了地图map、画布canvas

组件主要属于视图层,通过wxml来进行结构布局,类似于html。通过wxss修改样式,类似于css。
组件使用语法实例:

更多的组件以及相关使用方法可以到官方文档-组件查看

3、API

网络
媒体
数据
位置
设备
界面
开发接口

其中网络请求的使用必须先到公众平台登录小程序账号,在设置页面那里,设置允许访问的域名,网络请求包含了普通的http请求、支持上传、下载、socket。基本上满足了我们开发中所需要的网络需求。

这些API属于逻辑层,写在js文件中,
使用实例:

可以到官方文档-API查看其它API的使用方法。

4、编译运行

1、模拟器
可以在模拟器上看效果,上面降到了运行底层不同,效果跟在手机上运行有些差异

201819750-195c6b0a318eb2de

模拟器.png

2、真机
在左边的选项栏中,选择项目,然后点预览会生产一个二维码,用管理员微信号扫一扫就可以在真机上看实际效果

211819750-8a621b6004d60464

Paste_Image.png

实践–跑步小程序。

真机运行截图(运行于iPhone7,微信版本:6.3.30):

221819750-3f78b677cfaad40e

home.jpeg
231819750-cb5d8b8a7a888612

run.jpeg
241819750-460c81a2c4a7c1dd

slideback.jpeg
251819750-7f05267108bf823b

slide.jpeg

功能:

能够计算里程、时间、实时获取跑步路径(有些粗糙)

思路:

主要使用了微信小程序的获取位置APIwx.getLocation()和地图组件map
首先实现一个计时器进行 计时,通过wx.getLocation()获取坐标,把获取到的坐标存在一个数组中,通过坐标每隔一段时间获取里程,进行累加得到总里程,同时也通过坐标点进行连线
存在的问题:
1、因为目前找不到在地图上画连线的方法,所以采用了在地图上贴小红点图的方法显示大概跑步路径,路径比较粗糙。
2、虽然采用了API里面的火星坐标gcj02类型,但是获取的坐标跟国际坐标差不多,依然存在着偏差。

核心代码:

我把全部代码放在github上-weChatApp-Run,可以下载来看看或者先star收藏,我以后还会进行一些优化更新。现在只是一个学习Demo,大家沟通学习,实际应用还需更多优化。

wxml文件布局代码:

js文件逻辑代码:

五、后语

本文是一个快速上手开发的介绍,细节介绍可以查看官方文档
我的相关全部代码放在github上-weChatApp-Run

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

2 7 收藏 1 评论

关于作者:王小树

王小树,alanwangmodify 个人主页 · 我的文章 · 5 ·     

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部