面试题——his小程序

李合胜

于 2022-10-19 23:00:33 发布

阅读量399

点赞数 1

分类专栏：小程序文章标签：微信小程序小程序前端

本文链接：https://blog.csdn.net/weixin_45464486/article/details/127417857

版权

小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

小程序和普通网页区别

运行环境不同：网页在浏览器运行，小程序在微信环境运行

开发模式不同： 网页开发用浏览器+代码编辑器 小程序有自己的一套标准开发模式，使
用小程序开发工具

api不同 运行环境不同所以小程序没有办法调用bom和dom的api 小程序可以调用微信环境
提供的各种api 比如扫码，支付，地理定位，摇一摇，附近的人等等...
复制代码

小程序的项目构成

pages 用来存放所有小程序页面
utils 用来存放工具性质模块，比如格式化时间.wxs文件，封装请求数据组件.js文件

app.js 小程序项目的入口文件  类似vue的 app.vue 
app.json 小程序项目的全局配置文件
app.wxss 小程序项目的全局样式文件
project.config.json 项目的配置文件
sitemap.json 用来配置小程序是否允许被微信搜索引擎搜索到，比如：在微信小程序搜
京东，会弹出京东小程序，
如果关闭，搭建的项目，微信是无法搜索到的。
复制代码

**小程序页面的组成部分

每个页面由四个基本文件组成，在app.json文件中配置好pages后小程序会自动生成文件
1. .js文件 存放页面脚本文件，存放页面的数据，事件处理函数等 （写逻辑代码）
2. .json文件 当前页面配置文件，配置窗口的外观，表现等
3. .wxml文件 存放页面布局，类似html但不同，div=view span=text img=image 
4. .wxss文件 存放样式类似css但是和css不同，.wxss新增了rpx像素单位，只能引入外
链文件和样式背景图等都必须外链文件。
复制代码

app.json文件介绍

pages ：用来记录当前小程序所有页面的路径
window：全局定义小程序所有页面的背景颜色，文字颜色等等...
style:全局定义小程序的组件所使用的样式版本
sitemapLocation：用来指明sitemap.json的位置

复制代码

小程序的组件

<view></view>
<text></text>
<swiper>
   <swiper-item></swiper-item>
</swiper>
<icon></icon>
<image  src=""></image>
<rich-text  nodes="<p></p>"></rich-text>
复制代码

小程序如何实现循环


<view  wx:for="{{arr}}"  wx:key="index"  >
<view  wx:for="{{arr}}"  wx:key="*this"  >
默认下标=index 默认内容=item   *this代表每个内容可以当（作为）下标使用
如果要修改默认值可以 wx:for-index="i" 将默认下标修改为i wx：key="i"即可
    
复制代码

事件

<view data-i="{{实际的值}}" bindtap="事件">

在.js页面


事件名（接受的值）{}

复制代码

如何实现文本框双向数据绑定

input value="msg" bindinput="事件名"
在.js页面
data中：msg："" 声明一下变量
事件名（e）{
    this.setData({
        msg:e.detail.value
    })
}
复制代码

页面导航

navigateTo 非tabBar页面
switchTab  tabBar页面
navigateBack 后退
exot 退出
声明式导航：<navigator url="路径" open-type="">
编程式导航：
wx.switchTab({
    url: `/pages/cart/cart?id=66`
})


复制代码

如何实现下拉刷新，上拉加载（偏官方一点）

1.开启全局下拉刷新，在app.json节点中enablePullDownRefresh:true
  开启局部下拉刷新，在组件.json文件中 enablePullDownRefresh:true
2.配置下拉刷新的窗口样式
  backgroundTextStyle:dark loading效果
  backgroundColor窗口背景色
3.监听下拉刷新事件
  通过onPullDownRefresh()
  数据重置成功后调用关闭下拉刷新效果也可以在json文件中写入
  stopPullDownRefresh：true 或者在.js页面中wx.stopPullDownRefresh()
  
上拉加载：
1.onReachBottomDistance：60配置上拉触底距离为60 全局局部一样写法，
监听页面上拉触底事件 onReachBottom() { ‘触发了上拉触底事件’ }
复制代码

如何实现下拉刷新，上拉加载（修改理解后更简单）

首先在在json文件中开启下拉刷新值为true，在app.json开启为全局，在组件.json开启
为局部
配置下拉刷新的窗口样式，如：配置loading效果，窗口背景色。配置下拉刷新后关闭下
拉刷新效果。
配置上拉加载的，上拉触底距离为60，然后监听事件。
onPulllDownRefresh下拉刷新事件
onReachBottom上拉加载事件
复制代码

网络请求限制，如何配置合法域名？

 1.出于安全考虑，小程序对数据接口的请求有限制要求，小程序只能请求https类型接口，
必须将接口的域名添加到信任列表中否则控制台会提示（警告）
 2.登录小程序公众平台--->开发管理---->开发设置--->服务器域名--->修改合法域名

复制代码

如何封装https网络请求

 1.在项目跟目录utils文件中，创建request.js 声明变量request复值function函数中写
request请求代码
var request = function (options){
     wx.request({
        url: options.url, //仅为示例，并非真实的接口地址
        data:options.data,
        method:options.method,
        header: {
          'content-type': 'application/json' // 默认值
        },
        success:(res)=>{
          options.success(res)
        },
}
使用es5语法导出request实例 module export =request
使用时 const {request} = require('路径')
复制代码

如何创建组件

在项目根目录下新建components文件，右击新建复用组件输入组件
名称回车会自动生成四个文件，分别是：.json.js.wxss.wxml和页
面文件功能一致。
然后注册组件在app.json中注册为全局，在组件内的json中注册为
局部，"usingComponents":{
    "组件名必须驼峰或者my——text":"/路径"
}
使用组件时直接组件名的标签即可<my——text></my——text>
复制代码

组件和页面的区别

组件：
    1. 都是由四个文件组成，.json.js.wxml.wxss
    2. 组件的.json文件需要声明component（）函数
    3. 组件的.js文件中需要调用component（）函数
    4. 组件的方法直接定义在methods中即可
页面：
    页面中.js调用page方法即可
复制代码

properties和data的区别

小程序的组件中，properties属性和data属性用法相同，都是可读
可写，但是data适合储存组件的私有数据，properties适合储存外
界传递给组件的私有数据
复制代码

数据监听器

在Component中使用observers来监听，语法是
"字段A,字段B,字段C":function(A的值，...){
    //执行的逻辑操作代码
}

复制代码

纯数据字段

开启纯数据字段方式，在component函数中的options中写入
pureDataPattern: /^_/ // 指定所有 _ 开头的数据字段为纯数据字段
然后将数据的属性名写为
_value:'',
_rgb:{
    r:0,
    g:0,
    b:0
}
复制代码

组件的主要生命周期

在小程序中，最重要的生命周期函数有三个分别是，
created，attached，detached
1.组件实例刚刚被创建好触发created，不能调用setData
用来给组件的this添加一些自定义属性
2.组件完全初始化完毕，进入页面节点树后，触发
attached。this.data已经被初始化完毕，初始化工作比如发送请求。
3.组件离开页面节点树，触发detached生命周期函数，清理性质工作
复制代码

插槽

options: {
    multipleSlots: true // 在组件定义时的选项中启用多 slot 支持
},
在组件中：
 <slot name="A"></slot>
 在页面中：
 <my-text>
     <blick slot="A"> // block标签不会被渲染
         <text>123</text>
     </blick>
 <my-text>
复制代码

父子组件通信（父传子）

1.父组件在标签中直接写传递的数据名+值，语法：val="123"
2.properties可以接受外界传递给组件的数据,语法：
properties:{
    属性名：{
        type:"数据类型",
        value:"默认值"//当父组件没有传递这个数据时才会显示默认值
    },
    //简写：
    val:String,//使用时注意字符串和数字类型否则会拼接
}
子组件直接使用data.属性名也可以获取到数据

复制代码

父子组件通信（子传父）

1.在子组件中定义方法，通过this.triggerEvent('countEve',123)传递数据
2.父组件在子组件的标签上通过bind:countEve="触发的方法" 触发一个方法
然后在方法中通过e.detail来获取子组件传递的实际数据
复制代码

npm 和 node

npm 是脚本语言，不能单独运行，嵌套在html使用，通过浏览器去运行，浏览器拥有js引
擎可以解析js代码，逐行解析有一行报错下面的代码都不会执行。
ECMAScript,DOM,BOM

node是让js在服务端开发环境，node使用js语法ECMAScript，有自己的api，例：fs，
http,path,url等等...
复制代码

模块化开发

一个js文件是一个模块，每个模块之间相互独立不会影响对方。
使用模块，必须引入module.exports={} require该导入导出遵循COmmonJS规范，只能应
用于服务端

export default import 该导入导出是遵循ES6规范，可以用在前端也可以用在服务端

复制代码

全局数据共享

全局数据共享又称为：状态管理模式，是为了解决组件直接数据共享问题，开发中常用的
全局数据共享方案牛vuex，redux，mobx等...而微信小程序常用的就是MobX
复制代码

什么是分包？

分包就是把一个完整的小程序项目，按照需求划分为不同的子包，最终打包成不同的分
包，用户再使用时按需进行加载，唯一好处就是提升性能，优化小程序首次启动的下载时
间。
复制代码

如何使用分包以及分包体积限制？

使用分包： 在根目录创建分包文件夹，在文件中创建pages文件在pages文件中创建
Component组件文件，创建完成后在app.json配置下面路径
//声明分包的结构
"subPackages": [
    {
       "root":"packageA",   //第一个分包的根目录
       "pages": [   //分包下所有页面的存放路径
         "pages/detail/detail"
       ]
    },
    {
      "root":"packageB",
      "pages": [
        "pages/goods/goods"
      ]
   }
  ],
  
分包限制：
   整个小程序所有包大小不能超过16m （主包+分包）
   单个分包或主包大小不能超过2m

作者：sheng_max
链接：https://juejin.cn/post/7154968750142259207/
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。