★ 背景

【提示】：正在补充更新中…

首先，附上一张效果图.
之前就有关注过小程序的发展，感觉可以抽一点的时间来学习一下，通过官方文档以及提供的示例 Demo，发现兴趣挺高，不失为一个可以扩展自身技能的试炼场
此处仅做简单的使用介绍，几乎无需涉及艰深的代码技术问题，旨在备忘自己的使用步骤 …

（一）. 前期准备

①. 参考开发文档》》》【微信小程序开发文档】
②. 申请开发账号》》》【 申请帐号】

注意：作为登录帐号，请填写未被微信公众平台注册，未被微信开放平台注册，未被个人微信号绑定的邮箱

③. 下载开发工具》》》【***普通小程序开发者工具 ***】》》》【 小游戏开发者工具】

进行微信小程序的开发，需要使用官方提供的开发工具进行代码的开发和上传

④. 开发工具的使用》》》【 开发工具的使用】

根据官方文档，快速熟悉开发者工具的使用

（二）. 开发笔记

①. 实现的功能

微信获取当前所处地的经纬度

根据经纬度，访问 api.seniverse.com 所提供的天气状况接口，获取 JSON 数据

页面初始化加载或者通过点击按钮ajax加载数据，完成页面展示效果的更新

②. 熟悉框架代码

本身来讲，小程序所提供的初始源代码是极为简洁的，在此就不多说了，可以参考官方文档加强了解即可，主要操作的代码如下图所示：

③. 配置服务器域名

腾讯要求微信小程序使用到的域名都需要在公众平台中进行设置（可以说是一种备案）

request 合法域名基本上一定要填写，因为只要小程序需要服务器，基本上就需要这个设置。

socket 合法域名一般是小程序功能涉及即时通信时需要

uploadFile 合法域名和 downloadFile 合法域名分别是小程序功能涉及上传文件和下载文件时需要

也就是说第一项基本是必填，后面三项根据功能选填

以我的代码需求，则需要进行如下的配置（通过这次的操作，以后也要记住这一重点）

④. HTTP请求

因为我只设计了一个页面，简便起见在页面初始化时即进行了三个http请求，/pages/index/index.js 核心代码参考如下：

onReady:function(){//初始化加载数据var self = this//获取定位信息 经纬度wx.getLocation({success: function (res) {//初始化【北京】经纬度  location=39.93:116.40（格式是 纬度:经度，英文冒号分隔） var newLocation = '39.93:116.40'; if(res){newLocation = res.latitude + ":" + res.longitude}self.setData({newLocation: newLocation})//初始化获取 当前的天气状况wx.request({url: 'https://api.seniverse.com/v3/weather/now.json?key=fdw9qkun1btvenxt&location=' + newLocation+'&language=zh-Hans&unit=c',success: function (result) {self.setData({nowInfo: result.data.results[0]})},fail: function ({ errMsg }) {console.log('request fail', errMsg)}}),//初始化获取今天的生活指数信息wx.request({url: 'https://api.seniverse.com/v3/life/suggestion.json?key=fdw9qkun1btvenxt&location=' + newLocation + '&language=zh-Hans',success: function (result) {self.setData({lifeInfo: result.data.results[0].suggestion})},fail: function ({ errMsg }) {console.log('request fail', errMsg)}}),//初始化话获取最近三天的天气状况wx.request({url: 'https://api.seniverse.com/v3/weather/daily.json?key=fdw9qkun1btvenxt&location=' + newLocation + '&language=zh-Hans&unit=c&start=0&days=5',success: function (result) {self.setData({//weatherInfo: result.data.results[0]weatherInfo: formatDate(result.data.results[0])})},})}})},

⑤. 代码编译上传

因为微信小程序上传总量的限制，尽量不要等到最后一次性上传，通过微信扫描“预览”所展示的二维码，即可在真机测试自己的小程序效果

最后附一张，开发者工具所展示的效果图：

★ 附录

①. 提示：

推荐参考：【微信小程序开发指导】
使用接口：【心知天气】（在此我只使用了三个免费接口，可自行注册）

②. 问题收集

♠. 页面布局提示

小程序要求组件拥有了一些特有的属性值，需要格外注意，以便准确顺利的进行页面布局

♥. wx:key 警告

主要的提示信息为：

Now you can provide attr "wx:key" for a "wx:for" to improve performance.

官方解释如下：

显然wx：key的出现都与wx：for绑定，可以参看文档：【列表渲染-小程序】
此处对于我的项目，最简单的解决方案：在wx:for后面添加wx:key="key" 可消除警告

♦. 域名配置问题

报错信息如下：

... 不在以下 request 合法域名列表中，请参考文档 ...

类似报错情况如下：

提示：可以参考前面介绍的 ***【(二)-③】***中的解决方案.

③. 关于微信支付的一点思考

根据官方Demo中对此功能的注释如下：
文章太过冗长所以已摘出为新文章【小程序 —— 关于微信支付功能的思路】

④. 参考推荐

微信小程序页面跳转方法总结
微信小程序支付简单小结与梳理
exports 和 module.exports 的区别
微信小程序初体验与DEMO分享

⑤. 源码参考

欢迎指摘

【moTzxx 微信小程序】

微信小程序实例——天气预报开发笔记（进行中...）相关推荐

微信小程序实例：开发showToast消息提示接口
相信在学习小程序文档或者已经创建项目的开发员们,都很清楚小程序的wx.showToast接口只提供了两种icon[success和loading]展示形式,那假如我想要的是不要图标只要存粹的文字提醒呢 ...
微信小程序开发登录界面mysql_微信小程序欢迎界面开发的实例详解
微信小程序欢迎界面市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面. 下面将会按照以下的顺序介绍: 布局的实现逻辑的实现样式的实现 1.布局的实现整个布局 ...
php欢迎界面代码,分享微信小程序欢迎界面开发的实例代码
这篇文章主要分享微信小程序欢迎界面开发的实例代码的相关资料,这里实现欢迎界面的简单实例和实现代码及实现效果图,需要的朋友可以参考下微信小程序欢迎界面市面上大多数的app都会有一个欢迎界面,下面将 ...
php小程序开发实例,微信小程序全局配置开发实例
本文主要和大家分享微信小程序全局配置开发实例,主要以代码的形式和大家分享,希望能帮助到大家. 一.app.json 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设 ...
微信小程序 Notes ｜开发常用事例（四）
前言那啥,关于小程序整理了几篇笔记,多多少少对个人而言有点作用,下面附上对应的文章链接: 微信小程序 | 开发常用事例(一) 微信小程序 | 开发常用事例(二) 微信小程序 Notes | 开发常用 ...
微信小程序实例源码大全demo下载
怎么本地测试微信小程序实例源码 1.下载源码 2.打开微信开发者工具 3.添加项目->选择本项目目录->编译执行微信小程序实例源码大全微信小程序游戏类demo:识色:从相似颜色中挑选不 ...
微信小程序image组件开发程序以及相关图片问题参考资料汇总
微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值.以下汇总主要涉及到微信小程序image组件有关资源路径.缩放和剪裁模式等进行的探讨,无论是对 ...
eslint不报错 vue_2-2【微信小程序全栈开发课程】index页面搭建--ESlint格式错误
1.修改入口文件也就是src/pages/index/main.js文件 main.js是入口文件,通过main.js来加载index.vue文件.每个页面文件夹中都要有main.js文件 //加载 ...
微信小程序蓝牙BLE开发实战——案例(二)
微信小程序蓝牙BLE开发实战(二) 上篇主要介绍在开发过程中应用到相关API操作.接下来介绍个人在项目开发中应用蓝牙BLE一些事情. 由于时间比较仓促, 有些注释没那么详细.请理解~写的不好欢迎各位大 ...

微信小程序实例——天气预报开发笔记（进行中...）

★ 背景

（一）. 前期准备

（二）. 开发笔记

①. 实现的功能

②. 熟悉框架代码

③. 配置服务器域名

④. HTTP请求

⑤. 代码编译上传

★ 附录

①. 提示：

②. 问题收集

♠. 页面布局提示

♥. wx:key 警告

♦. 域名配置问题

③. 关于微信支付的一点思考

④. 参考推荐

⑤. 源码参考

微信小程序实例——天气预报开发笔记（进行中...）相关推荐

最新文章

热门文章