微信小程序面试（1）-一一网

小程序项目结构的相关文件类型

WXML是一种标签语言，结合基础组件、事件组件，可以构建出界面结构
WXSS是样式语言，用于描述WXML的组件样式
JS逻辑处理
JSON 小程序设置，页面注册，页面标题及tabbar
复制代码

主要文件

app.json 必须要有这个文件，如果没有这个文件，项目无法运行，因为微信框架把这个作为配置文件入口，整个小程序的全局配置。包括页面注册，网络设置，以及小程序的 window 背景色，配置导航条样式，配置默认标题
app.js必须要有这个文件，没有也是会报错！但是这个文件创建一下就行什么都不需要写以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量
app.wxss 可选

小程序的双向绑定和vue?

小程序直接this.data的属性是不可以同步到试图，必须调用this.setData
复制代码

小程序传递数据的方法？

在app.js文件定义全局变量globalData,将信息存储在里面
复制代码

    // app.js
    App({
        //全局变量
        globalData:{
            userInfo:null
        }
    })
复制代码

使用的时候，直接使用getApp()拿到存储的信息
使用wx.navigateTo与wx.redirectTo的时候，可以将部分数据放在url里面，并在新页面load的时候初始化

 //Navigate
 wx.navigateTo({
     url:''
 })
 //Redirect
 wx.redirectTo({
     url:''
 })
 
 //page.js
 Page({
     onload:function(option){
         console.log(option.name + 'is' + option.gender
         this.setData({
             option:option
         })
     }
 })
复制代码

注意：wx.navigateTo和wx.redirectTo不允许跳转到tab所包含的页面 onload只执行一次
使用本地缓存Storage相关

小程序生命周期

整体生命周期

onload 页面加载时触发，一个页面只会调用一次，可以在onLoad的参数中获取打开当前页面路径中的参数
onshow 页面显示/切入前台时触发
onReady 页面初次渲染完成时触发。一个页面只调用一次，代表页面已经准备妥当，可以和视图层进行交互
onHide 页面隐藏/切入后台时触发。如navigateTo或底部tab切换到其他页面，小程序切入后台
onUnload 页面卸载时触发。如redirectTo或navigateBack到其他页面时

页面生命周期

Page({
    // 页面创建完，只触发一次，通常获取后台数据或接受了另一个页面的传参数使用
        onload(){},
        //进入页面时触发
        onShow(){},
        // 页面离开时触发
        onHide(){},
        // 监听页面初次渲染完成
        onReady(){},
        //监听页面卸载，类型于vue中destroyed
        onUnload(){},
        onReachBottom(){
            console.log('到达页面底部')
        }
        // 下拉时触发
        onPullDownRefresh(){
            console.log('onPullDownRefresh')
        },
        // 点击右上角分享时触发
        onShareAppMessage(){}
})
复制代码

微信小程序的路由管理

两种路由触发模式：

标签方式触发
vue
<router-link to="">
小程序
<navigator url="中转的路劲?key=value">
接受：在另一个页面在onload生命周期中接受
编程时触发
vue
this.$router.push()
小程序
wx.navigateTo 带历史回退
wx.redirectTo 不保留历史，跳转到另一个页面，不能返回到上一页面 this.$router.replace()
wx.switchTab 只跳转到tabBar页面，不带回退
wx.reLaunch 即能跳转到tabbar页面，也能跳转到非tabbar页面，不带历史回退

下拉刷新

在全局config中的window配置enablePullDownRefresh,在page中定义onPullDownRefresh钩子函数，达到下拉条件之后，该钩子函数执行，发起请求方法。请求返回后，调用wx.stopPullDownRefresh停止下拉刷新

bindTap和catchtap的区别

相同点：都是作为点击事件函数，点击时触发。没什么区分
不同点：bindtap是不会组织冒泡事件，catchtap阻止冒泡

wx.navigateTo、wx.redirectTo、wx.switchTab、wx.navigateBack、wx.relaunch区别

wx.navigateTo：保留当前页面，跳转到应用内的某个页面。但是不能跳转到tabbar页面
wx.redirectTo:关闭当前页面，跳转到新的页面（类似重定向）。但是不允许跳转到tabbar页面
wx.switchTab:跳转到tabbar页面，并关闭其他所有非tabbar页面
getCurrentPages() 获取当前的页面栈，决定需要返回几层
wx.reLaunch()：关闭所有页面，打开到应用内的某个页面

登录流程

获取wx.login获取code传递后台服务器获取微信用户唯一标识openid及本次登录的会话密匙session_key。拿到开发者服务器传回来的会话密匙之后，前端要保存wx.setStorageSync(‘sessionKey’,’value’)
持久登录：持久保存session信息存放在cookie中以请求头的方式带回给服务端，放到request.js里的wx.request的header里

文章版权归作者所有，未经允许请勿转载。

THE END

前端