封装request.js请求文件
目的：优化代码结构以及后期项目版本迭代和维护方便，提升代码的执行速度。
假设:在原生page中使用基本写法创建ajax请求
//发送请求了
wx.request({
url:"",
method:"",
data:"",
success(res){
//写业务操做代码
},
fail(err){
}
});
//第一点：page界面业务操做代码混乱，代码多层嵌套。
//第二点：多次书写重复代码造成代码冗余，造成小程序珠宝太大，导致原生小程序不能上线（最新版本主包v奥大小为1.5M）新建思想：对内置api进行二次封装。
新建封装结构：
page界面业务代码
网络请求层 network目录
在网路目录下封装项目的api接口文件
在utils工具类（公用业务）二次封装网络请求（wx.request）
需要了解原生小程序中如何进行代码模块化封装
查官方文档：
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
return d;
}
module.exports = {
FOO: foo,
bar: bar,
};
module.exports.msg = "some msg";
//引入
var tools = require("./tools.wxs");二次封装网络文件
//request 二次封装文件
//请求方式
//接口是否认证
//接口是否传参
//请求头设置不一样 content-type
//定义基本路径
let baseUrl = "http://xawn.f3322.net:10004/"
//定义header
let header = {
"Content-Type": "application/json"
};
//封装缓存读取方法
function getStorage(key) {
return wx.getStorageSync(key);
}
/*
封装的请求request
*/
function Request(url, data, method) {
if (!method) {
method = "get";
}
//读取用户的令牌值 token
let token = getStorage('_token');
if (token) {
header['token'] = token;
}
return new Promise((resolve, reject) => {
//执行ajax请求
wx.request({
method: method,
url: `${baseUrl}${url}`,
data: data,
header: header,
success(res) {
//promise成功响应数据
resolve(res);
},
fail(err) {
reject(err);
}
})
})
}
module.exports =wxml语法
wx:if 条件判断
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
wxml使用模板：
定义模板： 使用name属性即可
<!-- 创建模板 -->
<template name="img">
<image src=""></image>
</template>
<!-- video模板 -->
<template name="vide">
<video src=""></video>
</template>
在网页中使用：
<template is="img">
</template>
模板中使用数据需要用data属性传递
将模板所需要的 data 传入
//使用条件编译 结合数据返的type类型
<block wx:for="{{item.media}}" wx:for-item="items" wx:key="indexs" wx:for-index="indexs">
<template wx:if="{{item.type==1}}" is="img" data="{{items}}">
</template>
<template wx:else is="vide" data="{{items}}">
</template>
</block>wxml 中template封装
官方文档给出了引入template模板方法
WXML 提供两种文件引用方式import和include。
在需要使用template的Page界面中，使用import组件引入外部定义的template模板
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
在使用的page界面
使用
template模板仅限网页模板结构渲染。
将模板的css公用抽离在使用模板的page中引入
@import "common.wxss";
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。原生小程序中的自定义组件
自定义组件由json wxml wxss js 4个文件组成
修改自定义组件的json文件
直接在项目尚新建component组件可以直接生成component组件。
生成的组件内置Component构造器
// component/swiper/swiper.js
使用组件的构造器生成组件的代码区域
Component({
/**
* 组件的属性列表
* 等价vue组件的props
*/
properties: {
},
/**
* 组件的初始数据
* 组件自身的数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})自定义组件在Page界面中使用
Page界面中的json配置文件：
在app.json配置文件中可以全局注册自定义组件
在项目中msg的界面下配置局部注册
在msgwxml界面中使用自定义组件
全局注册：
任何Page界面都可以使用。
自定义组件中父组件给子组件传递值
1.在自定义组件中先约束props传值
properties:{
banner:Array,//直接定义数据类型
bannerList:{
type:Array,//类型
value:[],//定义默认值
}
}父组件给子组件传值，子组件中默认的this为当前组件实例，并且组件的props默认关联到data数据源。
结论是:自定义组件的rops可以在组件的wxml中直接使用变量。
原生小程序如何操做事件
事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
原生小程序事件前缀
bind****
bindtap====click
bindlongtag
事件处理函数的e
事件点击传值
事件处理函数中在e.currentTarget上获取
// 跳转页面 类似编程导航
// 跳转page下的界面
// navigateTo 跳转可以写代码参数
wx.navigateTo({
url: `/pages/type/type?id=${id}`,
})
// 跳转tabbar
//switchTab不能携带数据
// wx.switchTab({
// url: '/pages/my/my',
// })自定义组件中如何添加自定义事件
在组件上声明自定义事件
<component-tag-name bindmyevent="onMyEvent" />
bind****(自定义名称)
在子组件中对应的业务代码位置触发
子组件触发自定义事件传值
父组件接收
