一、框架
ui框架：Mui===>dev.dcloud.net.cn/mui/
调取设备：html5plus ===>www.html5plus.org/doc/
请求城市接口的数据 url：api.jisuapi.com/vehiclelimi… dataType: 'json', data: { appkey: '15b163096b822dbf' },
请求天气接口： url：'api.jisuapi.com/vehiclelimi…' dataType: 'json', data: { appkey: '15b163096b822dbf' },
请求限行接口： url:'api.jisuapi.com/vehiclelimi…' dataType:'json', data:{ appkey:'15b163096b822dbf', city:city, date:'2021-06-21'// 这里要封装一个函数来处理日期格式
二： 通过自定义事件传递参数:参考：dev.dcloud.net.cn/mui/event/#… 一： 1 自定义事件传递参数 var cityText = this.parentNode.innerText // 获取城市的值
mui.back() // 返回上一页
// 获取到详情页通过id获取
var home = plus.webview.getWebviewById('views/home.html');
// 通过自定义事件传递参数:参考：https://dev.dcloud.net.cn/mui/event/#customevent
mui.fire(home, 'cityName', {
cityText: cityText
})
2.接收自定义参数：https://dev.dcloud.net.cn/mui/event/#customevent
// 监听自定义事件传递过来的参数：
window.addEventListener('cityName', function(e){
var cityText = e.detail.cityText
alert(cityText)
console.log(cityText)
})
二：页面之间传值
1 传递数据 跳转页面，并且传递数据
mui.openWindow({
url:'detailDrivinglicense.html',
id:'detailDrivinglicense',
extras:{ //传递参数
data:JSON.stringify(obj)
}
})
2 另一个页面接收参数
//获取到传过来的值
var self = plus.webview.currentWebview();
var data = JSON.parse( self.data );
三：驾驶证测试数据
驾驶证号：410602199202262512
档案编号：410601444945
姓名：杨志鹏
四：驾驶证测试数据
车牌号：冀G2393C
车架号：LMGAC1382H1A59184|
发动机：F131882
三：数据结构转换（例子）
var result = {[{},{}]}; // 默认是这个结构
var city = {a:[{},{}],b:[{},{}]} //要转换成这个格式才方便做数据渲染
var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o','p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
var city = {}
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < result.length; j++) {
if (arr[i] == result[j].city[0]) {
var arrs = arr[i].toUpperCase()
if (!city[arrs]) {
city[arrs] = [result[j]]
} else {
city[arrs].push(result[j])
}
}
}
}
console.log(JSON.stringify(city))
四：问题：
1：微信、qq、微博 登录之后不能继续登录分2中情况： 1.1 一旦有一个登录之后 其他两个都不能登录，不能再弹出登录层（这是自己的逻辑，需求里也做成了自己的逻辑） 1.2 一个登录过后，只有下次重新进来，读取到本地存储数据后，才不能再弹出登录层，如果登录了一个没有杀死当前进程，在当前页面还是可以继续点击登录的，登录弹层一样可以继续展示。（这是老师的教我们时候的逻辑）
2：手机端获取地理位置配置：打包后有问题：解决方式（其中的这些东西）
1：后端提供的这些东西配置上 四、百度地图appkey ios和安卓：BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58;io.dcloud.HBuilder
BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58;io.dcloud.HBuilder
2：在监听设备位置变化信息 配置一个地图为：百度
3：百度地图为空：解决办法
4：自己做的问题 4.1点击开始查询：现在是收起键盘的，打包后关注是否收起 4.2 每个页面的高度太高记得调整
五：项目考核：
阶段四 作业1考核文案：
1、产品是什么？
这次我们做的是一个政府类项目app，叫：车辆违章查询助手，在androi和ios应用商店都可以查到，这个项目因为是政府的，我们签了保密协议 ，接口这些都是保密的，整个过程我都参与了，包括上线。
2、用了哪些技能点和接入的东西？ 使用H5C3做页面布局，使用淘宝的无限适配方案做页面自适应，整个app采用的框架是mui，调取设备使用html5plus 的api，
3、具体实现哪些功能？ 下面我说一下我负责的功能模块分别是 ：首页的违章查询 和 我的页面。 先说一下违章查询：有根据手机系统默认定位，也可以选择其他城市，调用后端给的接口，展示所选择的城市，根据选择的城市，在首页可以看到 天气情况 和 当天的限行数据。
在首页 有违章高发地 实时路况，加油站，地理位置的展示，采用的是百度地图 有违章高发地：调用后端给的接口之后，在地图上渲染标注出 违章所在地，可以点击违章标记展示对应的详细地理位置 实时路况：可以渲染出当前交通繁忙状态，哪里比较拥堵这些 加油站：根据所选的地理位置，标注出，有加油站的地方
接下来说一下 我的页面：有登录、设置 我的驾照 和我的车辆车查询功能
首先登录：采用第三方快捷登录，有微信 QQ 和 微博，用户使用其中一种方式登录后，会禁用其他登录方式，知道当前登录状态退出后才能切换其他方式登录。
我的驾照，我的车辆：可以输入相驾驶证书和车牌号等相关编号进行查询，查询记录会保存到本地存储，如果已经有查找记录就直接读取本地存储的记录进入到查询列表页直接查看，可以看到违规了多少条记录，扣了多少分，这些记录都是可以通过滑动删除信息，没有修改操作，因为这些信息基本改动都是没有的。
以上就是我做这个项目整个过程的基本介绍。请问你还有什么需要问的吗？
老师笔记：
一、改变状态栏背景颜色 plus.navigator.setStatusBarBackground('#000000'); ****注意：该方法是全局修改
二、沉浸式状态栏
- 找到manifest.json plus:{ "statusbar":{ "immersed":true //开启沉浸式 } }
- 修改meta ：加入===》viewport-fit=cover
三、自定义事件（进行页面之前到传值） 子：(传递的页面) mui.fire(页面,'自定义事件名称',{ cityTitle:传递的值 }) 接收页： window.addEventListener('自定义事件名称',function(e){ var xxxx = e.detail.cityTitle; alert( xxxx ); });
四、百度地图appkey ios和安卓：BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58;io.dcloud.HBuilder
五、返回上一页，并且刷新页面 B： //定义事件 var my = plus.webview.getWebviewById('my.html'); mui.fire(my,'refresh'); A： window.addEventListener('refresh',function(){ location.reload(); })
六、实时路况-百度地图api 链接：lbsyun.baidu.com/products/pr… 引入css ： 引入js
七、驾驶证测试数据 驾驶证号：410602199202262512 档案编号：410601444945 姓名：杨志鹏 、
八、驾驶证测试数据 车牌号：冀G2393C 车架号：LMGAC1382H1A59184 发动机：F131882 大家需要完成 ： 1. 我的车辆，滑动删除 2. 右下角添加车辆
