小程序学习日常
1，改变数据有两种方式：this.setData（{ 在这里更改数据，会刷新ui }）还有:this.data.变量。后面这个会更改数据，但是不会更新ui。标准的用法，是用self替换this。可以在其中使用self.data.count=12.
https://zhuanlan.zhihu.com/p/176985401
具体任务：
1.安装vscode和飞书插件，登录并能够实现hello_world预览
2.设计和开发简单的界面，实现简单的事件，如点击按钮以后可以弹窗
3.可以完整地调用后端接口，并通过小程序log日志的方式输出来调试网络请求的发送和接收的数据包
4.与后端联调，实现前端网络请求到后端数据并把数据显示界面textbox空间中
1.安装vscode中的飞书插件[1]
2.设计简单的界面，并实现界面之间的跳转
飞书小程序所用的编程语言与微信所用的编程语言类似，都是在H5的基础上发展而来。在飞书小程序中，一个页面包含.ttml，.ttss，.js和.json文件，其中，.ttml文件与.html文件一致，为页面内容的载体，决定了展示的内容；.ttss文件与.css文件一致，决定页面内容的表现形式；.js文件负责逻辑函数和数据绑定等，可以实现页面之间的交互以及页面与用户之间的交互；.json文件负责小程序的相关配置。
根据本周的任务，初步确定了四个页面，主页面和调用API的页面，主页面实现与剩余两个页面的跳转，调用API的页面负责调用相关的API并输出相应的结果，分别命名为home，log，front和end（介绍前端和后端的相关任务）。
为了确保页面有效，首先需要修改app.json文件，将创建的页面添加到pages中，同时通过ext内的defaultPages对不同模式下（sidebar/windows/mobile等）的页面进行默认设置，并通过windows进行窗口模式下的相关设置。由于home和log页面为同一级页面，故选择通过tabBar来进行切换。
{
"pages":[
"pages/home/home",
"pages/home/front/front",
"pages/home/end/end",
"pages/log/log"
],
"ext": {
"defaultPages": {
"sidebarMode": "pages/home/home",
"PCMode": "pages/home/home"
}
},
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Mini Program",
"navigationBarTextStyle":"black"
},
"tabBar": {
"color": "#000",
"selectedColor": "#f00",
"backgroundColor": "#ddffff",
"borderStyle": "white",
"list":[
{
"pagePath": "pages/home/home",
"text": "主页",
"iconPath": "icon/home.png",
"selectedIconPath": "icon/home_active.png"
},
{
"pagePath": "pages/log/log",
"text": "log",
"iconPath": "icon/log.png",
"selectedIconPath": "icon/log_active.png"
}
]
}
}3.完善页面
飞书小程序页面的编写与H5类似，由于初期任务的界面和跳转逻辑较为简单，仅使用了navigator和button组件[2]和一些简单的css样式，具体代码不在此赘述。
4.调用API并输出
API是小程序重要的左膀右臂，本周调用了获取当前位置经纬度（官方API）、获取成都的天气（第三方API）和Springboot中的8080端口API来作为初步学习。其中，官方API可以从小程序开发文档[2]中获得相关参数以及样例，调用也较为简单，第三方API和Springboot中的API需要提供url和相关标识信息，并通过官方API request调用，然后通过console.log()函数输出相应的结果。对于结果，需要通过setData函数对data中的message进行赋值，才能将其在页面上输出。
// pages/log/log.js
Page({
data: {
message:"",
date:"",
week:"",
city:"",
wea:"",
air_tips:""
},
onLoad: function (options) {
self = this
},
send1:function(){
tt.getLocation({
success (res) {
console.log(`经度 ${res.longitude}，纬度 ${res.latitude}`);
self.setData({
message:`经度 ${res.longitude}，纬度 ${res.latitude}`→引号来自电脑键盘左上方波浪线上的`
})
},
fail (res) {
console.log(`getLocation 调用失败`);
self.setData({
message:`getLocation 调用失败`
})
}
});
},
send2:function(){
tt.request({
url: 'https://tianqiapi.com/api',
method:'GET',
data:{
appid:3166****,
appsecret:'hdkf****',
version:'v6',
city:'成都'
},
success(res) {
console.log(res.data);
self.setData({
message:`日期：${res.data.date}，天气：${res.data.wea}`,
city:res.data.city,
date:res.data.date,
week:res.data.week,
wea:res.data.wea,
air_tips:res.data.air_tips
})
},
fail(res) {
console.log(`request 调用失败`);
self