Uni-app-微信小程序-学习日志-01-MVVM模式-HTTP Headers

1.MVVM模式
以前html模式是运用dom操作实现元素互动，uni-app改成vue的MVVM模式，是vue绑定模式，给dom元素绑定一个js变量，并在script中修改js的变量的值，dom元素会自动变化，页面自动更新渲染，具体代码如下： 

(未了解uni-app可以先了解一下创建微信小程序的vue文件的具体框架：https://uniapp.dcloud.net.cn/tutorial/project.html)

<template>
    <view>
        <text>{{textvalue}}</text><!-- 这里演示了组件值的绑定 -->
        <button :type="buttontype" @click="changetextvalue()">修改为789</button><!-- 这里演示了属性和事件的绑定 -->
    </view>
</template>

<script>
    export default {
        data() {
            return {
                textvalue:"123",
                buttontype:"primary"
            };
        },
        onLoad() {
            this.textvalue="456"//这里修改textvalue的值，其实123都来不及显示就变成了456
        },
        methods: {
            changetextvalue() {
                this.textvalue="789"//这里修改textvalue的值，页面自动刷新为789
            }
        }
    }
</script>

(1)data(){} 里面放着页面中需要绑定的数据，这样才能被界面正确地绑定和渲染，注意：需要用return{};包起来，因为vue只接受function形式。

(2)methods:{} 里面主要是写函数方法，运用他们的时候需要有一个@，例如：@click=""

(3)onload(){}  称为生命周期，与上面两个对象平级。实现监听页面加载，可有参数，参数为上个页面传递的数据，参数类型为Object（用于页面传参）
传参例子：
初始页面跳转部分代码：实现初始页面跳转到test.vue页面传递参数id和name

uni.navigateTo({url:'testURL?id=1&name=uniapp'});

test.vue页面部分代码：实现接受传递的参数并运用传递的参数

<script>
onload:function (option){
    console.log(option.id+option.name);//打印传递过来的参数
}
</script>

注意：option是Object类型，会序列化上个页面传递的参数

TIPS：在onload对象中使用本页面的this，最好另外定义一个变量赋值使用，避免出错。
例如：

onLoad: function() {
            let that = this;   //此处另外定义一个变量that赋值为该页面的this
            setTimeout(function() {
                that.loading = true
            }, 500)
        },

拓展：ref（引用标记）vue支持给组件设置ref，这类似于之前html中给一个dom元素设id，然后在js中也可以用this.$refs.xxx来获取。如下：

<template>
  <view>
    <view ref="testview">11111</view>
    <button @click="getTest">获取test节点</button>
  </view>
</template>

<script>
export default {
  methods: {
    getTest() {
      console.log(this.$refs.testview)
    }}
};
</script>

2.HTTP 消息头（HTTP Headers）允许客户端和服务器通过 request和 response传递附加信息。

uni.request(Object)：发起网络请求，相当于把ajax改成了uni.request

OBJECT 参数说明

参数名	类型	必填	默认值	说明	平台差异说明
url	String	是		开发者服务器接口地址
data	Object/String/ArrayBuffer	否		请求的参数	App 3.3.7 以下不支持 ArrayBuffer 类型
header	Object	否		设置请求的 header，header 中不能设置 Referer。	App、H5端会自动带上cookie，且H5端不可手动修改

主要简单说明几个
（1）header：请求头
类型：Object，那么结合method的两种方法（get和post）实现
method为GET时，header可以为：（常见的 GET获取数据的方式）

 header: {
        'content-type': 'application/json'
        }

 'content-type': 'application/json'  表示的是传输的数据格式为JSON格式，例如：{ name: 'name', age: 18 }，此格式告诉服务端消息主体是序列化后的 JSON 字符串，POST和GET方法都可以用此请求头，该请求头使用频率较高；

method为POST时，header可以为：（最常见的 POST 提交数据的方式）

header: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }

   'Content-Type': 'application/x-www-form-urlencoded'传输的数据格式为url链接后携带数据，例如以下格式：（提交的数据按照 title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3 的方式进行编码）

POST http://www.example.com HTTP/1.1

Content-Type: application/x-www-form-urlencoded;charset=utf-8

title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3

（2）data数据说明
最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String。转换规则如下：

总结：
对于请求头 header['content-type'] 为 application/json 的数据，会进行 JSON 序列化。（即{ name: 'name', age: 18 }的字符串形式）
对于 请求头 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换为 query string（即 name=name&age=18的字符串形式）。

【2022.11.23】