原生微信小程序
1.基本知识
1.1 四个重要文件
原生小程序文件:
- .js 功能操作 对标 js文件
- .wxml view结构 对标 html文件
- .wxss view样式 对标 css文件
- .json view数据 对标 json文件
flex布局
- flex-direction: 设置主轴的方向
- justify-content: 设置主轴上的子元素排列方式
- flex-wrap: 设置子元素是否换行
- align-content: 设置侧轴的子元素的排列方式（多行）
- align-items:设置侧轴上的子元素排列方式（单行）
- flex-flow:复合属性，相当于同时设置了flex-direction 和 flex-wrap
注意:
flex属性是flex item的属性，也就是flex布局的容器里所有子元素的属性。
flex属性是flex-gorw,flex-shrink,flex-basis三个属性的简写，默认值为0 1 auto。后两个属性可选。flex设置为1，就是设置flex: 1 1 auto;
路由跳转
页面路由
- pages.json
# `pages.json文件` uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar
配置项
globalStyle Object 否 设置默认页面的窗口表现
pages Object Array 是 设置页面路径及窗口表现
easycom Object 否 组件自动引入规则
tabBar Object 否 设置底部 tab 的表现
condition Object 否 启动模式配置
subPackages Object Array 否 分包加载配置
preloadRule Object 否 分包预下载规则 微信小程序
workers String 否 Worker 代码放置的目录 微信小程序
leftWindow Object 否 大屏左侧窗口 H5
topWindow Object 否 大屏顶部窗口 H5
rightWindow Object 否 大屏右侧窗口 H5
uniIdRouter Object 否 自动跳转相关配置
-
uni.navigateTo(OBJECT)- 特点:保留当前页面，跳转到应用内的某个页面
- 参数说明:
- url: 跳转到的路径
- success : 成功回调函数
- fail : 失败回调函数
-
uni.navigateBack(object)- 特点: 保留当前页面, 跳转到应用内某个页面 可以返回到原页面
-
uni.redirectTo(OBJECT)- 特点: 关闭当前页面，跳转到应用内的某个页面。
- 参数说明: (和上述一样)
-
uni.switchTab(OBJECT)- 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
-
uni.preloadPage(OBJECT)-
特点: 预加载页面 性能优化技术
-
总结:
navigateTo,redirectTo只能打开非 tabBar 页面。switchTab只能打开tabBar页面。reLaunch可以打开任意页面。- 页面底部的
tabBar由页面决定，即只要是定义为tabBar的页面，底部都有tabBar。 - 不能在
App.vue里面进行页面跳转。 - H5端页面刷新之后页面栈会消失，此时
navigateBack不能返回，如果一定要返回可以使用history.back()导航到浏览器的其他历史记录。
发起网络请求
- uni.request(OBJECT)
const requestTask = uni.request({
url: 'https://www.example.com/request', //仅为示例
data: {
name: 'name',
age: 18
},
success: function(res) {
console.log(res.data);
}
});
地图使用
- map组件 官方文档 uniapp.dcloud.net.cn/component/m…
地图分显示，和获取定位两部分；显示可选择腾讯地图、高德地图、百度地图 获取定位方法由uniapp提供 具体用法需要看文档
大概流程可以和面试官这样说:
- 获取定位
- 获取城市具体地址
- 移动的指定位置
- 添加定位点
- 移动地图位置触发获取地图中心店坐标
