目录
注册小程序账号，获取AppID
开发准备
- 目录结构
- 删快速模板中不必要的代码
视图层
- 何为WXML
  - 数据绑定
  - 列表渲染
  - 条件渲染
  - 模板
  - 事件
- 何为WXSS
实战天气wxapp
- 效果
- 配置（因为用到别人写好的模拟天气数据的API作练习，为避免跨域问题）
- 代码
- 直接编译对应开发页码
- 涉及的核心知识点
实战天气的代码完整下载
快捷链接

注册小程序账号，获取AppID

要在手机微信上运行测试小程序，必须获取AppID。

开发准备

目录结构

当下基于ReactJs的AntDesignPro v2.0版本的目录使用了umiJs作为项目脚手架。与wxApp一样是基于功能与页面的维度的目录结构不再扁平化。特点都是：结构更加清晰，减少耦合（独立,增加可维护性,），一删全删，方便 copy 和共享。

├── images ##推荐公共图片等资源放在此处！
├── pages                     # 业务页面入口和常用模板
│   ├── index                # 同类型页面文件夹（基于功能与页面的维度的目录结构）
│    │   - index.js          ## 页面数据逻辑（必须）
│    │   - index.wxml        ## 页面结构（必须）
│    │   - index.wxss        ## 页面样式表（非必须）
│    │   - index.jason       ## 页面配置（非必须）
│   └── logs                  # 日志
│       ├── logs.wxml
│       └── logs.js
├── utils                      # 工具类
├── app.js                     # 小程序逻辑（必须）
├── app.wxss                   # 小程序公共样式表（非必须）
├── app.jason                  # 小程序公共配置（必须）！决定页面路径、窗口、网络超时时间、设置tab

为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

删快速模板中不必要的代码

删除 app.js 中的所有代码。这里会存储整个小程序会执行的一些逻辑，例如权限获取等。我们暂时不需要。
删除 app.wxss 中的所有代码。这里会存储整个小程序的一些样式。我们暂时不需要。
删除 app.json 中的第四行 “pages/logs/logs” 以及第三行最后的逗号，这里声明了小程序的第二个页面，我们暂时不需要。
删除 pages/logs 文件夹以及其中的所有文件。这里定义了小程序的第二个页面，我们暂时不需要。
删除 utils 文件夹以及其中的所有文件。这里定义了一些用途函数，我们暂时不需要。
删除 index.js 中的所有代码，这里会定义 index 页面的逻辑。只保留一行 Page({})
删除 index.wxml 中的所有代码，这里会定义 index 页面的布局。只保留一行

<view class="title">hello world!</view>

删除 index.wxss 中的所有代码，这里会定义 index 页面的样式。只保留

.title {margin-top: 300rpx;text-align: center;
}

视图层

何为WXML

WeiXin Markup Language是框架设计的一套标签语言。与HTML的基本功能一样用于构建出页面的结构。其次还能实现数据绑定，列表渲染，条件渲染，模板（可理解为想ReactJs之类js框架中的component），事件。

数据绑定

<!--wxml-->
<view> {{message}} </view>

列表渲染

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

条件渲染

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>

模板

<!--wxml-->
<template name="staffName"><view>FirstName: {{firstName}}, LastName: {{lastName}}</view>
</template><template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

// page.js
Page({data: {staffA: {firstName: 'Hulk', lastName: 'Hu'},staffB: {firstName: 'Shang', lastName: 'You'},staffC: {firstName: 'Gideon', lastName: 'Lin'}}
})

事件

<view bindtap="add"> {{count}} </view>

何为WXSS

WeiXin Style Sheets是一套样式语言，用于描述 WXML 的组件样式。WXSS 具有 CSS 大部分特性。为性能着想，依旧不建议使用内联样式。

与 CSS 相比，WXSS 扩展的特性
1. 尺寸单位rpx：可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。同理iPhone6 Plus 1rpx = 0.552px= 1物理像素。
2. 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径
3. 支持的选择器：类、id、元素、和（，）、::after、::before
4. 全局（app.wxss）与局部（对应page文件夹里的.wxss，注意！会覆盖 app.wxss 中相同的选择器）

实战天气wxapp

效果

配置（因为用到别人写好的模拟天气数据的API作练习，为避免跨域问题）

代码

weather.wxml

<view class='contain'><button class="location-wrapper" open-type="{{ locationAuthType==1 ? 'openSetting' : ''}}" bindopensetting="onTapLocation" bindtap="onTapLocation" plain="true"><view class="location"><image class="location-icon" src="/img/icon/location-icon.png"></image><view class="location-text">{{city}}</view></view><!-- 0: 未弹窗， 1: 已拒绝， 2: 已同意 --><view wx:if="{{locationAuthType==0}}"class="location-tips">点击获取当前位置</view><view wx:if="{{locationAuthType==1}}"class="location-tips">点击开启位置权限</view><view wx:if="{{locationAuthType==2}}"class="location-tips"></view></button><view class="title">{{nowTemp}}</view><view class="weather">{{nowWeather}}</view><image class='weatherBg' src='{{bgUrl}}'></image><view class="day-weather" bindtap = "onTapDayWeather"><view class="day-text">{{todayDate}}</view><view class="temp-text">{{todayTemp}}</view><image class="arrow-icon" src="/img/icon/arrow.png"></image></view>
</view><view class="timeTitle"><image class="timeTitleIcon" src="/img/icon/time-icon.png"></image><view class="timeTitleText">未来24小时天气预测</view>
</view><scroll-view class='scrollView'  scroll-x style="width: 100%"><view class='list'><view class='listItem' wx:key="index" wx:for="{{forecast}}"><view class= 'item'>{{item.time}}</view><image class= 'itemImg' src='{{item.img}}'></image><view class= 'item'>{{item.temp}}</view></view></view>
</scroll-view>

weather.js

// 初始化常量：中文天气、天气对应的nav颜色
const weatherMap = {'sunny': '晴天','cloudy': '多云','overcast': '阴天','lightrain': '小雨','heavyrain': '大雨','snow': '雪'
}
const weatherColorMap = {'sunny': '#cbeefd','cloudy': '#deeef6','overcast': '#c6ced2','lightrain': '#bdd5e1','heavyrain': '#c5ccd0','snow': '#aae1fc'
}
// 腾讯：通过经纬度得出对应位置的城市
const QQMapWX = require('../../libs/qqmap-wx-jssdk.js')
// 未弹窗
const UNPROMPTED = 0
// 无权限
const UNAUTHORIZED = 1
// 已同意
const AUTHORIZED = 2
Page({data:{nowTemp: '14°',nowWeather: '阴天',bgUrl:"",forecast:[],todayTemp: "",todayDate: "",city:"广州市",locationAuthType: UNPROMPTED},onLoad(){// 实例化API核心类this.qqmapsdk = new QQMapWX({key: 'EAXBZ-33R3X-AA64F-7FIPQ-BY27J-5UF5B'});// 无参调用getNow则无停止刷新时间wx.getSetting({success: res => {let auth = res.authSetting['scope.userLocation']this.setData({locationAuthType: auth ? AUTHORIZED: (auth === false) ? UNAUTHORIZED : UNPROMPTED})if (auth)this.getCityAndWeather()elsethis.getNow() //使用默认城市广州},fail: () => {this.getNow() //使用默认城市广州}})},// callback为停止刷新函数参数getNow(callback) {// 发起网络请求url请求链接、data请求参数wx.request({url: 'https://test-miniprogram.com/api/weather/now',data: {city: this.data.city},success: res => {let result = res.data.resultlet now = result.nowlet forecastRes = result.forecastlet forecast=[];let nowHour = new Date().getHours()for (let i = 0; i < 8; i += 1) {forecast.push({time: (i*3 + nowHour) % 24 +'时',img: '/img/icon/' + forecastRes[i].weather+'-icon.png',temp: forecastRes[i].temp+'°'})}forecast[0].time = "现在";this.setToday(result.today);this.setData({nowTemp: now.temp + '°',nowWeather: weatherMap[now.weather],bgUrl: '/img/' + now.weather + '-bg.png',forecast: forecast})// 根据weather设置对应头部颜色wx.setNavigationBarColor({frontColor: '#000000',backgroundColor: weatherColorMap[now.weather],})},// 在完成刷新（无论成功失败）都调用complete: () => {// &&当callback存在则调用下拉刷新动作的函数callback && callback()}})},// 下拉刷新onPullDownRefresh: function () {// 下拉刷新是调用getNow方法并返回一个停止下拉刷新动作的函数为参数this.getNow(() => {wx.stopPullDownRefresh()})},setToday(result) {let date = new Date()this.setData({todayTemp: `${result.minTemp}° - ${result.maxTemp}°`,todayDate: `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} 今天`})},onTapDayWeather() {// wx.showToast()wx.navigateTo({url: '/pages/weather/list/list?city='+this.data.city,})},onTapLocation() {this.getCityAndWeather()},getCityAndWeather() {wx.getLocation({success: res => {//调用接口this.qqmapsdk.reverseGeocoder({location: {latitude: res.latitude,longitude: res.longitude},success: res => {let city = res.result.address_component.citythis.setData({city: city,locationAuthType: AUTHORIZED})this.getNow()},fail: () => {console.log("city fail");}})},fail: () => {console.log("locat fail");this.setData({locationAuthType: UNAUTHORIZED,})}})}
})

list.wxml

<view><view class='date-item' wx:for="{{weekWeather}}"><view class="date-wrapper"><view class="day">{{item.day}}</view><view class="date">{{item.date}}</view></view><view class="temp">{{item.temp}}</view><image class="weather-icon" src="{{item.iconPath}}"></image></view>
</view>

list.js

const dayMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
Page({date: {weekWeather: []},onLoad(options) {this.setData({city: options.city})this.getWeekWeather()},onPullDownRefresh() {this.getWeekWeather(() => {wx.stopPullDownRefresh()})},getWeekWeather(callback) {wx.request({url: 'https://test-miniprogram.com/api/weather/future',data: {time: new Date().getTime(),city: this.data.city},success: res => {let result = res.data.resultthis.setWeekWeather(result)},complete: () => {callback && callback()}})},setWeekWeather(result) {let weekWeather = []for (let i = 0; i < 7; i++) {let date = new Date()date.setDate(date.getDate() + i)weekWeather.push({day: dayMap[date.getDay()],date: `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`,temp: `${result[i].minTemp}° - ${result[i].maxTemp}°`,iconPath: '/img/icon/' + result[i].weather + '-icon.png'})}weekWeather[0].day = '今天'this.setData({weekWeather: weekWeather})}
})

直接编译对应开发页码

涉及的核心知识点

生命周期——进入第二页，返回第一页的生命周期顺序理解：

//初始页
onLoad
onShow
onReady
onHide
//进入第二页,则第一页隐藏（并没有卸载）
onLoad
onShow
onReady
onUnload
//返回第一页(第二页卸载，且由于第二页还存在只是隐藏了而已无需再加载和准备页面，所以只调用了onshow

调用API（wx.request）
异步调用：所有生命周期函数、所有手势响应函数、所有函数类型的参数
理解setData中的异步和同步（调用 setData 之后，this.data 的值将会立即改变。然而，小程序的页面（即视图层）需要等待页面再次渲染才能够更新。总结：页面数据无需刷新的重新渲染对应部分为异步，赋值为同步）；与React中的status很相似（直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。）
下拉刷新（配置开启下拉刷新+且要注意每次下拉刷新后无论成功与否都要使用wx.stopPullDownRefresh()）
按钮响应（bindTap）
页面跳转并能传参（wx.navigateTo）
获取位置（通过 wx.getLocation 获取当前经纬度，通过百度api将经纬度转换为城市）
条件渲染（wx.if）

实战天气的代码完整下载

我学习微信小程序的整理，不仅仅只有天气！ clickHere 》

快捷链接

全部React学习笔记的目录 Click Here>>
全部Javascript学习笔记的目录 Click Here>>
Less学习笔记 Click Here>>
安利一波前端开发推荐使用的工具 Click Here>>
ESLint问题记录 Click Here>>
github各类实战练习源码下载 Click Here>>
如果你觉得我的东西能帮到你，无限欢迎给我的github库点个收藏Star~0v 0~

【微信小程序学习笔记02理解与初始准备】【实战天气微信小程序】相关推荐

微信小程序学习笔记02：微信小程序注册
文章目录零.学习目标一.小程序注册方法 1.注册 2.登录二.小程序开发工具 1.下载开发工具 2.安装开发工具 3.启动开发工具三.创建第一个小程序 1.启动开发者工具 2.新建项目 3.模 ...
小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
微信小程序学习笔记一 + 小程序介绍前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
自己的微信小程序学习笔记【3】——第三方UI库Lin-Ui的加载及使用
其他微信小程序的学习笔记自己的微信小程序学习笔记[1]--小程序开发工具的使用及项目文件说明自己的微信小程序学习笔记[2]--从零开始新建项目文章目录其他微信小程序的学习笔记前言一.Lin ...
微信小程序学习笔记（七）----简单文章推荐列表和分类图标的实现
想要实现一个顶部是几篇纯文字的推荐文章,推荐文章下面是四个分类图标,具体实现出来是这个样子的,比较简单: 首先先来找一下素材,这几个图标是我在阿里巴巴图标库下载的,这里是下载地址: http://ww ...
小程序学习笔记（1）
小程序学习笔记(1) 以下是学习期间记录的笔记: 10-18号晚上学习笔记: 小程序实际上是需要下载安装的,只是很小,用户基本上觉察不到组件是具有一定的功能的代码的集合移动端适配: 物理像素:是图 ...
MySQL技术内幕-InnoDB存储引擎第2版-学习笔记-02
MySQL技术内幕-InnoDB存储引擎第2版-学习笔记-02 6. 锁人们认为行级锁总会增加开销.实际上,只有当实现本身会增加开销时,行级锁才会增加开销.InnoDB 存储引擎不需要锁升级,因 ...
JavaWeb黑马旅游网-学习笔记02【注册功能】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
JavaWeb-综合案例(用户信息)-学习笔记02【登录功能】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb-综合案例(用户信息)-学习笔记01[列表查询] JavaWeb-综合案例(用户信息)-学习笔记02[登录功能] JavaWeb-综合案 ...

【微信小程序学习笔记02理解与初始准备】【实战天气微信小程序】

目录