小程序真题合集

小程序真题合集

• • 1. 微信小程序主要目录和文件的作用
  • 2. 微信小程序的生命周期函数
  • • 2.1 应用（App）的生命周期
    • 2.2 小程序页面（Page）的生命周期
    • 3. 微信小程序的登陆流程
    • 4. 微信小程序中路由跳转的方式
    • 5. 谈谈wxml与标准的html的异同
    • 6. 谈谈WXSS和CSS的异同
    • 7. 封装微信小程序的数据请求
    • 8. 小程序传递数据的方法
    • 9. 小程序的双向绑定和vue的异同

      1. 微信小程序主要目录和文件的作用

      • project.config.json 项目配置文件，用得最多的就是配置是否开启https校验；
      • App.js 设置一些全局的基础数据等；
      • App.json 底部tab, 标题栏和路由等设置；
      • App.wxss 公共样式，引入iconfont等；
      • pages 里面包含一个个具体的页面；
      • index.json (配置当前页面标题和引入组件等)；
      • index.wxml (页面结构)；
      • index.wxss (页面样式表)；
      • index.js (页面的逻辑，请求和数据处理等)；

        2. 微信小程序的生命周期函数

        2.1 应用（App）的生命周期

        • onLaunch：当小程序初始化完成时，会触发 onLaunch（全局只触发一次）。
        • onShow：当小程序启动，或从后台进入前台显示，会触发 onShow。
        • onHide：当小程序从前台进入后台，会触发 onHide。
        • onError：当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息。

          [小程序初始化]  
             |  
             V  
          [onLaunch]  
             |  
             V  
          [onShow] (循环，当小程序显示时触发)  
             |     |  
             |{ }}和wx:if等}, header = {}) {  
            return new Promise((resolve, reject) = {  
              wx.request({  
                url: url,  
                method: method.toUpperCase(),  
                data: method === 'GET' ? {} : data, // 根据请求方法决定是否发送 data  
                header: {  
                  'content-type': 'application/json', // 默认为 JSON 数据  
                  ...header,  
                },  
                success(res) {  
                  if (res.statusCode === 200) {  
                    resolve(res.data);  
                  } else {  
                    reject(res);  
                  }  
                },  
                fail(err) {  
                  reject(err);  
                },  
              });  
            });  
          }  
            
          module.exports = {  
            request,  
          };
           request } = require('../../utils/request');  
            
          Page({  
            onLoad: function () {  
              request('https://api.example.com/data', 'GET')  
                .then((res) = {  
                  console.log('请求成功', res);  
                  // 处理成功逻辑  
                })  
                .catch((err) => {  
                  console.error('请求失败', err);  
                  // 处理失败逻辑  
                });  
            },  
            // ... 其他页面逻辑  
          });
          

          8. 小程序传递数据的方法

          • 使用全局变量实现数据传递 ：在app.js文件中定义全局变量globalData，在源页面设置变量的值，目标页面通过getApp().globalData获取变量的值。

            假设我们有一个全局的用户信息，需要在多个页面中使用，如用户名、头像等。

            app.js

            App({  
              globalData: {  
                userInfo: null // 初始化为null，后续可以通过登录等操作设置值  
              }  
            });
            

            xxx.js

            const app = getApp();  
            // 设置全局变量  
            app.globalData.userInfo = {name: '张三', avatarUrl: 'http://example.com/avatar.jpg'};  
            // 获取全局变量  
            console.log(app.globalData.userInfo);
            

            • 页面跳转或重定向时，使用url带参数传递数据 ：通过在跳转链接中附加参数，目标页面在onLoad函数中通过options参数获取传递的值。

              假设我们有一个商品列表页面（pages/productList/productList），当用户点击某个商品时，我们想要跳转到商品详情页面（pages/productDetail/productDetail）并传递商品ID。

              productList.js

              wx.navigateTo({  
                url: `/pages/productDetail/productDetail?productId=${productId}` // 假设productId是用户点击商品的ID  
              });
              

              productDetail.js

              Page({  
                onLoad: function (options) {  
                  // options中包含了从URL中解析出的参数  
                  const productId = options.productId;  
                  // 使用productId进行后续操作，如请求商品详情数据等  
                }  
              });
              

              • 事件触发传参 ：通过事件绑定，在源页面触发事件传递需要的参数，目标页面通过事件对象获取传递的值。
              • 使用缓存传递参数 ：使用wx.setStorageSync()在源页面设置存储的值，目标页面通过wx.getStorageSync()获取值。

                用户登录后，我们想要将登录凭证（如token）存储在缓存中，以便在后续请求中使用。

                登录成功页面（loginSuccess.js）

                wx.setStorageSync('token', loginToken); // 假设loginToken是登录成功后获取的token
                

                需要token的页面（xxx.js）

                const token = wx.getStorageSync('token');  
                // 使用token进行后续请求或其他操作
                

                • 使用eventChannel（路由传参） ：在页面跳转时，通过success回调函数中的eventChannel来向被打开页面传送数据。

                  A页面打开一个B页面，并希望在B页面打开后立即传递一些数据给B页面。

                  A.js

                  wx.navigateTo({  
                    url: '/pages/B/B',  
                    success: function (res) {  
                      // 通过eventChannel向B页面发送数据  
                      const eventChannel = res.eventChannel;  
                      eventChannel.emit('acceptDataFromA', { data: '这是A页面传递的数据' });  
                    }  
                  });
                  

                  B.js

                  Page({  
                    onLoad: function (options) {  
                      // 监听A页面通过eventChannel发送的数据  
                      const eventChannel = this.getOpenerEventChannel();  
                      eventChannel.on('acceptDataFromA', function (data) {  
                        console.log(data); // 输出：{ data: '这是A页面传递的数据' }  
                      });  
                    }  
                  });
                  

                  9. 小程序的双向绑定和vue的异同

                  大体相同，但小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData()方法！

                  	小程序双向绑定	Vue双向绑定
                  实现方式	通过WXML模板和JS脚本实现，需要手动调用setData()更新数据	通过模板引擎和响应式数据等机制实现，数据变化自动触发视图更新
                  数据绑定方式	单向绑定，从数据到视图	双向绑定，支持从视图到数据和从数据到视图的自动同步
                  视图渲染	基于组件的渲染，需要手动编写组件模板和逻辑	基于组件的渲染，提供丰富的组件选项和生命周期钩子函数
                  开发效率	相对较低，需要手动处理数据更新和视图渲染	相对较高，数据变化自动触发视图更新，减少手动操作

                    
                      
                    输入的用户名是：{{username}}  
                  
                  Page({  
                    data: {  
                      username: ''  
                    },  
                    handleInput: function(e) {  
                      this.setData({  
                        username: e.detail.value  
                      });  
                    }  
                  });
                  

                    
                      
                    
                  输入的信息是：{{ message }}
                    
                  
                  new Vue({  
                    el: '#app',  
                    data: {  
                      message: ''  
                    }  
                  });