原生微信小程序入门知识梳理2 - 路由 - 组件 - 分包 - 接口请求封装

前言：记录学习原生微信小程序语法
个人博客 已更新该文章— 原生微信小程序入门知识梳理2

---

路由

官网地址

方法	参数	描述
wx.switchTab	Object	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.reLaunch	Object	关闭所有页面，打开到应用内的某个页面
wx.redirectTo	Object	关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.navigateTo	Object	保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
wx.navigateBack	Object	关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

//app.json 的 tabBar 字段定义的页面,路径不能带参数
wx.switchTab({
  url: '/index'
})
//参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔 
//浏览器地址传参，但是不能太多参数
wx.reLaunch({
  url: 'test?id=1'
})
wx.redirectTo({
  url: 'test?id=1'
})

wx.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过 eventChannel 向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})

wx.navigateBack({
  delta: 2 //返回的页面数，如果 delta 大于现有页面数，则返回到首页。
})

//页面js 获取路由传参
Page({
  onLoad (option) {
    console.log(option.query)
  }
})

视图容器

举例常见

---

view 简单说就是html中 div标签

---

scroll-view 可滚动视图区域
举例常见

属性	类型	作用
upper-threshold	number/string	距顶部/左边多远时，触发 scrolltoupper 事件
lower-threshold	number/string	距底部/右边多远时，触发 scrolltolower 事件
scroll-x	boolean	允许横向滚动
scroll-y	boolean	允许纵向滚动

表单组件

举例常见

---

input 输入框组件

<view>表单-输入框</view>
<input 
	type="text" 
	value="{{nameVal}}"  //数据绑定
	bindinput="handleInputEvent" //input输入事件
	placeholder="请输入账号" 
/>

<input 
	type="text" 
	password="{{true}}” 
	placeholder="请输入密码"
/>

// index.js   数据绑定
Page({
	data:{
		nameVal:''
	},
	handleInputEvent(e){
	// console.log(e.detail.value) 输入数据
	const val = e.detail.value
		this.setData({
			nameVal:val
		})
	}
})

radio 单选

<view>表单-单选</view>
<radio-group bindchange=''>
	<view>
	    //label 点击汉字选中
		<label for="1">
			<radio id="1”value="1” />男
		</label>
	</view>
	<view>
		<label for="2">
			<radio id="2”value="2 />女
		</label>
	</view>
</radio-group>

<view>表单-多选</view>
<checkbox-group bindchange="handleChange">
	<view wx:for="{{hobbyList}}"
		<label for="{{item.id}}">
			<checkbox :id="{{item.id}}" :value="{{item.id}}" />(item.name)]
		</labe1>
	</view>
</checkbox-group>

// index.js   数据绑定
Page({
	data:{
		hobbyList:[
			{id:1,name:'111'},
			{id:2,name:'222'},
			{id:3,name:'333'},
        ]
	},
	handleChange(e){
	// console.log(e.detail.value)  多选数据（单选同理）
	const val = e.detail.value
	}
})

主包和分包

主包即放置默认启动页面/TabBar 页面 ------ 分包配置

• 在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示

• 单个分包/主包大小不能超过 2M

原生接口请求封装

// app.js 
App({
  onLaunch (options) {
    // 小程序初始化 只有销毁进入 或者 第一次进入小程序 触发
  },
  onShow (options) {
    // 小程序在前台，显示触发
  },
   存储小程序全局数据
  globalData: {
  	baseUrl:'https://dlyjc.link/'
  }
})

//request.js
const app= getApp();
function request({
	url,
	method,
	header={},
	data={}
}){
	return new Promise((resolve, reject)=>[
		wx.request({
			url:app.globalData.baseUrl+ur1,
			method,
			data:{...data},
			header:{ ...header},
			success(res){
				resolve(res)
			}
			fail(err){
				reject(err)
			}
		})
	})
}
//导出
module.exports={
  get(url,data){
	 return request({
		 url,
		 data,
		 method:'GET'
	 })
   },
  post(url,data){
	 return request({
		 url,
		 data,
		 method:'POST'
	 })
   },
}

xxx.js
import { get , post } from '../../utils/request'
page({
	onload(){
		get('/a',(data:1)),
		post('/b',(data:2)),
	}

})