一、基本介绍
1.小程序js的运行进程跟视图层的运行进程是独立的，小程序js的运行进程跟视图层的运行进程是独立的，但是js是异步更新视图的。且无法直接访问视图的Dom
2.在开发过程中应用4个文件：.js,.json,.ttml,.ttss建立文件名必须 路径相同，文件名相同
二、生命周期
1.Page生命周期
onLoad() // 监听页面加载的时候
onReady() //监听页面初次渲染完成
onShow() //监听页面显示
onHide() //监听页面隐藏
onUnload() //监听页面卸载
当进行页面跳转再返回当前页面的时候会有数据不更新的问题： 解决方法是可以把数据更新的方法放到onShow里面,会更新数据
2.App小程序的生命周期
onLaunch //小程序初始化
onShow //小程序显示
onHide //小程序隐藏
onError //错误监听函数
onPageNotFound //监听页面不存函数
三、组件中遇到的问题 -- map
1.map层级过高，导致设置页面的弹窗比map地图的层级底
<!-- 地图展示 -->
<map
id="myMapShare"
show-location
longitude="{{addressInfo.longitude}}"
latitude="{{addressInfo.latitude}}"
circles="{{addressInfo.circles}}"
scale="{{addressInfo.scale}}"
markers="{{addressInfo.markers}}"
>
</map>
<!-- 弹窗，解决map地图层级过高问题，必须跟原生组件是兄弟关系 -->
<view class="modal-bg" hidden="{{displayModal}}">
<view class="modal-bg-fixed" bindtap='modalOpera'></view>
<view class="modal-body">
<view class="modal-title">请填写联系方式</view>
<view class="modal-content-box clearfix">
<image src="{{imgBaseAddr + 'icon_tel.png'}}"></image>
<input type="number" placeholder="请输入手机号"
value="{{paramQueryTemp.workerMobile}}"
bindinput='getWorkerMobile'
/>
</view>
<view class="modal-footer">
<view class="modal-btn modal-confirm" catchtap='xhrSignUp'>好的</view>
</view>
</view>
</view>
</view>
解决方案：把弹窗设置成map的兄弟关系，然后设置z-index值大于map的z-index
2.请求接口的时候，map地图不展示的问题 因为map地图先于接口请求展示，当map地图展示的时候数据为异步，可以加计时器，或者是添加开关，当数据请求回来的时候再展示map组件。
四、手机号授权登录
1.首先先在抖音小程序申请手机号登录权限（针对个人不开放）
2.不能自动登录，需要通过按钮触发
<button
open-type="getPhoneNumber"
bindgetphonenumber="xhrGetPhoneNumber"
>授权手机号快捷登录</button>
3.由于手机号返回的是加密信息，则触发之前需要调用tt.login获取code，获取完毕以后传给后台，需要后台拿到code去解密手机号，在此期间，code的失效期是3分钟，所以需要检测code的时效性，如果失去效果则重新获取。
//在onshow阶段调用
onShow: function() {
this.xhrLogin()
},
xhrLogin(){
var _this = this;
tt.login({
force: true,
success(res) {
let param = {
code: res.code,
anonymousCode: res.anonymousCode,
userType: _this.data.from == 'cShareDetail' ? 20: 10, //是商户还是个人，商户传10个人传20
}
APIS.postLogin(param).then(res=>{
if(res.statusCode === _this.data.httpCode.suc){
console.log("把code传给后台")
}
})
},
fail(res) {
console.log(res)
},
});
},
//xhr -- 获取手机号
xhrGetPhoneNumber(e){
var _this = this;
tt.checkSession({
success() {
if(e.detail.errMsg == 'getPhoneNumber:ok'){
let paramTemp = {
encryptedData: e.detail.encryptedData,
iv:e.detail.iv
}
APIS.postIphone(paramTemp).then(res=>{
if(res.statusCode === _this.data.httpCode.suc){
console.log("获取手机号成功！")
}
})
}else{
console.log('其他错误！！')
}
},
fail() {
console.log(`session 已过期，需要重新登录`);
_this.xhrLogin()
},
});
},
五、小程序自定义tabbar栏，iphonex底部适配问题
1.在公共app.js里面获取手机型号，根据型号解决不同的样式问题
tt.getSystemInfo({
success: res => {
let modelmes = res.model;
console.log(modelmes)
if (modelmes.search('iPhone X') != -1) {
_this.globalData.isIphone = true
}else{
_this.globalData.isIphone = false
}
}
})
然后再根据isIphone设置不同的样式～～
项目还在进行中，希望大家期待下次的更新哦~
