微信开发者平台学习笔记
这次学习只为了解,不深入,看了B站一个讲得很好的学长记录的笔记。
下载微信开发者工具之后,微信扫码登录,创建小程序,在AppID中选择测试号,这样对于开发者测试比较方便。
1.获取微信头像昵称
编译界面如图,(打码部分是微信昵称和头像)
1.1 创建页面
- 编译方法: (1)界面有“编译”快捷按钮; (2)快捷键ctrl+s
- .js .json .wxml .wxss不同文件的注释方法都略有不同,需要注意
全局文件有三个:app.js app.json app.wxss (名称不可更改);
创建Pages目录文件,用来存放各个页面;
创建页面,页面名字以及4个文件
1)js:页面逻辑实现
2)json:负责标题栏和一些状态栏
3)wxml:管理页面内容
4)wxss:页面排布把内容单元封装在view内部:
<view>内容</view>
用class方式进行页面布局,class也可以对组件进行布局,
class规定的样式名称前要加 ’ . ’ ,也可以对image、text组件不加点进行全局布局。获取图片、文字、按钮的组件,在index.wxml中进行
1)图片<image src='图片路径 '></image>
2)文字<text>内容</text>
3)按钮<button "属性内容">按钮上的内容</button>
页面设计
在index.wxml中会有<view class="container"> </view>
,container是自命名的一个容器,这个容器放在index.wxss文件中,主要是设计样式。逻辑设计,在index.js文件中进行
函数定义方法:函数名:function(参数列表){函数内容}, (函数结尾要有逗号)
变量定义方法:data:{变量名称:‘内容’} (两个变量的定义之间用逗号隔开)
1.2 示例对应解释
index.wxml中的内容
index.js中部分内容
index.wxss对应内容
1.3 补充wxss之flex布局
1.3.1 wxss
(1)尺寸单位“rpx”
原理是无视设备原先的尺寸,统一规定屏幕宽度为750rpx。比如相对于iphone6,1rpx=0.5px。
(2)常用属性
background-color — 背景色
color — 前景色
font-size — 字体大小
border — 边框
width — 宽度
height — 高度
(3)内联样式
a)class 如前所使用
b)style
<view style="color:red;background-color:yellow">测试</view>
1.3.2 flex布局
1.基本概念
(1)容器和项目
<view class="a"> <view class="b"> <view class="c"></view> </view>
</view>
对于a,b:a是容器,b是项目
对于b,c:b是容器,c是项目
(2)坐标轴
默认是水平布局:从左向右方向为主轴,从上向下方向为辅轴;
垂直布局:从上向下方向为主轴,从左向右方向为辅轴。
2.容器属性
.container {height: 100%;display: flex; flex-direction: column; /* 设置主轴方向 row||row-reverse||column-reverse 其中reverse是指主轴方向设为相反方向 */align-items: center; /* 设置项目在行中的对齐方式 stretch默认值,未设置项目尺寸时将项目拉伸填满辅轴; flex-start,项目顶部与辅轴起点对齐,对应有flex-end; center,项目在辅轴居中对齐; */justify-content: space-between; /* 设置项目在主轴方向上的对齐方式,分配项目之间及其周围多余的空间 flex-start默认值,项目对齐主轴起点,项目间不留空隙,对应有flex-end; center,项目在主轴上居中,项目间不留空隙; space-between,项目间距相等,第一个和最后一个项目分别与起点和终点对齐; space-around,项目间距相等,第一个和最后一个项目与起点和终点的距离为中间项目间距的一半;*/align-content: center; /* 用于多行排列时设置项目在辅轴上的对齐方式,分配项目之间及其周围多余的空间 flex-start,flex-end,center,space-between,space-around与以上类似, 只不过是以整行项目为单位 */flex-wrap: inherit; /* 用于规定是否允许项目换行,以及多行排列时换行的方向 nowrap默认值,不换行,若单行内容过多,项目宽度会被压缩; wrap,允许换行; wrap-reverse,允许换行,换行方向为wrap的反方向 */ padding: 200rpx 0; box-sizing: border-box;}
2. 查询天气小程序
准备工作:
桌面新建空文件夹weather,新建小程序名称也为weather,文件存放位置为新建文件夹所在位置。
在文件夹中新建一个image文件夹,用来存放可能会使用到的图片,天气图片可以自己到百度下载。
2.1 设置页面大体框架
这部分内容的最终呈现结果:(1)小程序最顶端格式设置
在app.json文件中:
(2)页面内容设置
在index.wxml文件中:
<!--pages/weather/index.wxml-->
<view class="container"> <!-- 地区选择器组件 --> <picker mode="region"> <view>北京市</view> </picker><text>19度 多云</text><image src="/images/cloudy.png"></image><view class="detail"> <view class="bar"> <view class="box">湿度</view> <view class="box">气压</view> <view class="box">能见度</view> </view> <view class="bar"> <view class="box">0%</view> <view class="box">0hpa</view> <view class="box">0km</view> </view> <view class="bar"> <view class="box">风向</view> <view class="box">风速</view> <view class="box">风力</view> </view> <view class="bar"> <view class="box">0</view> <view class="box">0km/h</view> <view class="box">0</view> </view> </view>
</view>
picker组件:是从底部弹起的滚动选择器组件,根据mode属性值可以选择不同的选择器:普通选择器(默认)、多列选择器、时间选择器、日期选择器、省市区选择器。
当mode=‘region’时:
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
value | Array | [] | 表示选中的省市区,默认选中每一列的首项 |
custom-item | String | 可为每一列的顶部添加一个自定义的项 | |
bindchange | EventHandle | 当value改变时触发change事件,event.detail={value:value} | |
disabled | Boolean | false | 是否禁用 |
为了使picker组件在选择时逻辑上有效,需要改动一部分:
<picker mode="region" bindchange="ChangeRegion"> <view>{{region}}</view> </picker>
同时在index.js文件中添加如下内容:
data: {region:['北京市','北京市','东城区'] }, ChangeRegion:function(e){this.setData({region:e.detail.value }) },
显然,添加一个事件函数ChangeRegion实现逻辑功能,变量region是为了使得显示随着选择的地区改变而改变。
(3)页面布局设置
在index.wxss文件中:
/* pages/weather/index.wxss */
.container{height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: space-around;}
.detail{display: flex; flex-direction: column; width: 100%;
}
.bar{display: flex; flex-direction: row; margin: 20rpx 0; /*设置外边距*/
}
.box{width: 33.3%; text-align: center;
}
text{font-size: 80rpx; color: #3c5f81;
}
image{width: 220rpx; height: 200rpx;
}
这些设置完成后只是完成了页面内容布局和结构设置,在功能方面并没有开始完善。
2.2 逻辑功能实现
这部分就是使得显示的天气以及其他相关信息在联网状态下随着地区的改变而实时改变。
2.2.1找到可靠的天气信息
网络API
- 找到合适的API接口;
- 根据网站的相关代码提示和接口信息制作url;
- 回到微信公众平台,添加服务器域名
根据UP主的推荐,百度搜索“和风天气”,进入网页,注册登陆账号密码。
在“应用管理”中新建一个免费开发版的应用,KEY名称设为“今日天气”,类型是Web API。新建成功后,需要用到的是KEY部分内容。key=a38457c8d0b24333aa2262595ebb55b6
(1)获取天气图标
点击上面的“开发文档”,找到“天气图标”,把相关的天气图标下载下来,然后选择里面喜欢的图表样式解压到images文件中去。(个人觉得下面这种好看)
可以把之前设置的图片改为999.png图片,这个是没有加载到天气图片的一个提示。
(2)获取API
“开发文档”中找到“API”,切到“城市信息搜索”一栏,这里有获取城市天气信息的详细介绍:
可以通过以下方式查看能够获取到的数据概览(以北京市为例):
复制“请求URL”中的网址数据,把“{请求参数}”部分改为必选的两个location和key的参数数据:
https://geoapi.heweather.net/v2/city/lookup?location=beijing&key=a38457c8d0b24333aa2262595ebb55b6
访问网址就会获得以下信息:
返回的数据中的参数、参数描述等都已经显示在“城市信息搜索”中。
(3)服务器配置
登录“微信公众平台”在首页找到“开发”->“开发设置”->“服务器域名”->“开始配置”->微信扫码登录->配置服务器信息:
在request合法域名中输入:https://geoapi.heweather.net,保存提交即可。
如果编辑页面的“详情”中显示如下,则说明配置成功(如果这一步配置不成功,则无法进行以下所有步骤)
2.2.1
(估计就到此为止了……)
微信开发者平台学习笔记相关推荐
- 微信公众平台学习笔记
微信公众号平台各个号的区别 订阅号 主要偏于为用户传达咨询(类似报纸杂志),认证后都是每天只可以群发一条消息 服务号 主要偏于服务交互(类似银行,114,提供服务查询),认证前后都是每个月可群发4条消 ...
- 微信开发者平台如何编写代码_编写超级清晰易读的代码的初级开发者指南
微信开发者平台如何编写代码 Writing code is one thing, but writing clean, readable code is another thing. But what ...
- 互联网晚报 | 3月8日 星期二 | 沪指深V反弹,创业板指跌幅收窄至0.75%;腾讯低代码平台与微信开发者平台打通...
沪指深V反弹,创业板指跌幅收窄至0.75% 沪指深V反弹,跌幅收窄至1%,创业板指跌幅收窄至0.75%. 首家递表SPAC通过港交所上市聆讯 3月9日消息,从港交所披露易获悉,首家递表的特殊目的收购公 ...
- 2012年9月9日参加中国软件开发者大会学习笔记
2012年9月9日参加中国软件开发者大会学习笔记 全文请访问:http://bbs.hpx-party.org/thread-74667-1-1.html 欢迎转发新浪微博:http://weibo. ...
- 微信小程序学习笔记(1)
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构 当开发者新建一个工程时,项目文件包 ...
- 2012年9月8日参加中国软件开发者大会学习笔记
2012年9月8日参加中国软件开发者大会学习笔记 全文敬请访问:http://bbs.hpx-party.org/thread-73728-1-1.html 欢迎转发新浪微博:http://weibo ...
- 小程序 pagescrollto_微信小程序学习笔记(三)-- 首页及详情页开发
一.常用组件 在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
- 微信开发者平台应用创建
微信开发者平台 1.移动应用的创建 (1)填写基本信息(应用的基本内容.应用的App图标等) (2)填写平台信息(应用的官网.应用的平台(ios.android.wp8应用))其中要有应用签名.应用报 ...
- 微信小程序学习笔记一 + 小程序介绍 前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一 微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
- 云平台学习笔记(三)-实践
一.实验目的 本实验目的: 1.熟练克隆虚拟机: 2.熟练配置域名解析 3.学会配置 Chrony: 4.学会安装 OpenStack 基础框架: 5.学会安装 Mariadb 数据库 6.熟练为虚拟 ...
最新文章
- Python判断两个文件夹中互相不同的文件有哪些、判断一个文件夹相对于另外一个文件夹缺少了哪些文件
- W1000变频器如何设定频率_变频器参数如何设定,参数故障处理办法
- SQLite的sqlite_master表
- matlab如何读取未知行数,带头文件和字段名的txt文件
- C语言atoi()函数(字符串转整数int类型)(atol()转换为long)
- chromedriver不在路径的解决办法
- Linux入门之Linux与Windows常见对比
- 一个想法照进现实-《IT连》创业项目:三天的风投对接活动内幕分享
- EOS钱包、账号及其关系详解
- css绘制卡券优惠券_如何使用css创建一个优惠券
- 白光LED焊接技术要求
- 《大学“电路分析基础”课程实验合集.实验四》丨线性电路特性的研究
- 【2022第十三届蓝桥杯】c/c++ 大学c组 解题报告
- ChatGPT版Office(Word/Excel/PPT)来了
- cv2.putText()函数中各个参数含义
- Array.of()
- android系统ime指令
- 中国汉字书法的回溯感和信息熵
- 在AS中引用第三方java类库含源代码包
- 监视Oracle ASM磁盘组上的空间使用情况(空闲和已用)
热门文章
- Linux中交叉编译器的安装
- libusb 串口 android,libusb 根据设备的serialnumber来打开
- Windows下Java环境配置
- 教你同时分析DPD多个单号的物流信息
- 第九章 CSS-DOM
- 在设计四人抢答器中灯全亮_EDA课程设计—四人抢答器设计
- Eclipse SVN提交代码ClientException异常解决
- 用SecurAble检测cpu是否支持Intel VT虚拟化技术的LOCKED ON,LOCKED OFF,YES,NO使用说明
- Spring框架学习笔记6-AOP编程-AspectJ方式
- STM32下载Bin文件的几种方式