目录
01 准备工作
下载:
微信开发者工具,从微信官网下载即可,选择稳定版
创建工程:
可以创建AppleID,和自己的公众号绑定
可以使用云开发,就不需要域名
如果不创建AppleID,使用 测试号
02 小程序基础知识
微信小程序的四种类型的文件
- js ---------- JavaScrip文件
- json -------- 项目配置文件,负责窗口颜色等等
- wxml ------- 类似HTML文件
- wxss ------- 类似CSS文件
app.json
必须要有这个文件,如果没有这个文件,IDE会报错,因为微信框架把这个作为配置文件入口,
你只需创建这个文件,里面写个大括号就行
以后我们会在这里对整个小程序的全局配置。记录了页面组成,配置小程序的窗口 背景色,配置导航条样式,配置默认标题。
app.js
必须要有这个文件,没有也是会报错!但是这个文件创建一下就行 什么都不需要写
以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。
app.wxss
这个文件不是必须的。因为它只是个全局CSS样式文件
app.wxml
这个也不是必须的,而且这个并不是指主界面哦~因为小程序的主页面是靠在JSON文件中配置来决定的
目录树
如果想要在几个界面交互,就在 Page
下创建新的文件夹(和index
同级别)
03 获取位置打开地图
参考
按键1、2参考:
微信小程序学习之路02-获取位置打开地图
按键3参考:
微信小程序–获取地理位置
其他:
微信小程序获取当前地址以及选择地址详解
效果
按键1:
按键2
按键3:
程序说明
定义函数 getCurrentLocation
调用微信小程序的获取地理位置函数 wx.getLocation
console.log(res)
将获取的地理位置信息放到console控制台上
console.log(err)
如果错误,就将错误消息输出到控制台(建议加这一句,不然错误看不到原因)
wx.showModal
调出微信的弹框,关于弹窗,可以参考https://www.jb51.net/article/165148.htm
//index.js
//获取当前经纬度
getCurrentLocation: function (e) {
wx.getLocation({
type: 'wgs84',
success: function (res) {
console.log(res);
var latitude = res.latitude
var longitude = res.longitude
//弹框
wx.showModal({
title: '当前位置',
content: "纬度:" + latitude + ",经度:" + longitude,
})
},
fail:function(err){
console.log(err)
}
})
}
创建按键,对于按键程序bindtap=“getCurrentLocation”
<!--index.wxml-->
<button class="page-body-button" type="primary" bindtap="getCurrentLocation">当前位置
</button>
04 遇到的问题及解决
问题:
按键1、3无效
解决:
- 在获取经纬度的函数内,加入
console.log(err)
输出错误信息 - 报错:
{errMsg: “getLocation:fail no permission”}
- 查询,说应该是未获取许可。这个许可会在第一次跳出,若忽略,之后不再跳出
- 因此,在工具栏选择清除缓存
- 重新编译运行,提示如下
- 查相关资料,应该在app.json内加入:
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
- 重新运行,跳出弹窗,允许使用地理位置
05 学习资料
推荐微信小程序的官方文档
小程序官方学习资料:【推荐】
【教程】小程序开发指南
IDE官方资料 【推荐】
【IDE教程】微信开发者工具 使用指南
学习资料:
知乎:如何入门微信小程序开发,有哪些学习资料?
官方:小程序UI设计
小程序社区:【demo】微信小程序Demo:一个时间管理的微信小程序
小程序社区
微信小程序官方
什么是云开发:
小程序传统开发模式和云开发模式的对比
浅谈我对微信小程序云开发的认识与见解
入门:小程序申请流程
微信小程序快速入门分享大纲
百度经验:微信小程序开发入门
超详细入门:
微信小程序入门教程+案例demo
微信小程序开发教程–从零开始 【推荐】