关于微信小程序的那些事

415 阅读12分钟

1. 小程序拒绝授权后是否还能拉起授权?

  如果授权是指button的getPhoneNumber,即授权手机号。是可以在拒绝之后,再次点击按钮时直接拉起授权弹窗。如果是类似于保存图片到本地的wx.getSetting和wx.authorize被拒绝授权后,官方规定短时间内点击不能再触发授权弹窗,避免影响体验。需要隔一段时间后才能触发。

2. 小程序授权之后杀死小程序,再次进入还需要重新授权?(可忽略)

  第一次进入授权个人信息已经写入数据库,删除小程序后再进入已经可以拿到openid,但还是需要授权拿信息?其实这时候可以通过openid匹配得到用户信息。

3. 小程序都使用过哪些框架?

  小程序官方原生框架、Wepy和Taro。

4. 小程序有哪几个目录?它们的作用分别是什么?

  官方解答:developers.weixin.qq.com/miniprogram…

  系统解答:**page文件夹,**用来存放页面文件的。

utils文件夹,****用来存放工具或者插件,以及相关Js方法通用文件。

app.js是一个逻辑处理文件,在项目开发中都需要用到它。

app.json文件是用来配置页面信息的,比如navigationBarTitleText就是用来配置页面导航的。

app.wxss是一个样式表文件,用来修饰页面效果的。

project.config.json这个文件,用来配置项目信息的。

sitemap.json这个文件,用来配置微信小程序以及页面是否被微信索引。

5. 小程序设置头部属性(导航栏)是哪些?官方地址:developers.weixin.qq.com/miniprogram…

“navigationBarTitleText”: “标题”,(导航的标题)
“navigationBarBackgroundColor”: “#EE0000”,(注意:颜色代码必须带#号)
“navigationBarTextStyle”: “white” (设置文字颜色,只能是white或者black)

6. 小程序request请求如何封装,是否手写?封装之后有什么好处或方便性?

答:一、将所有的接口放在统一的js文件中并导出。

二、在app.js中创建封装请求数据的方法。

三、在子页面中调用封装的方法请求数据。

好处(方便性):易于管理,比如说更改域名,更改header头部信息,在引用的时候节省冗余request代码。

例如:request.js

const isSuccess = res => res.code !== undefined && res.code !== null && (Number(res.code) === 1)

const resFormat = res => res.response || {}

export default function request (config = {}) {
  return new Promise(function (resolve, reject) {
    let options = config
    let http = /(http|https):\/\/([\w.]+\/?)\S*/
    
    if (!http.test(options.url)) {
      options.url = `https://test.cn/wechat${options.url}` // 正式
      // options.url = `https://wechat-test.cn/${options.url}` // 测试
    }

    if (options.setToken) {
      const token = wx.getStorageSync('userInfo').token
      options.header = {
        'content-type': 'application/json',
        'ln': 'sm_cg',
        'X-Requested-With': 'XMLHttpRequest',
        'Authorization': `Bearer ${token}` // token
      }
    }

    const defaults = {
      url: '',
      data: {},
      header: {
        'content-type': 'application/json'
      },
      method: 'GET',
      success: (res) => {
        if (!isSuccess(res.data)) {
          // wx.showToast({
          //   title: res.data.msg || '网络错误',
          //   icon: 'none'
          // })
          console.log(res.data.msg || '网络错误')
          reject(res.data.msg)
        }
        resolve(resFormat(res.data))
      },

      fail: (error) => {
        // wx.showToast({
        //   title: error.msg || '网络错误',
        //   icon: 'none'
        // })
        console.log(error.msg || '网络错误')
        reject(error)
      }
    }

    options = { ...defaults,
      ...options
    }
    wx.request(options)
  })
}

然后在api.js中引入

import request from './request'

export default {
  // 获得列表
  getHotCodeHistory: (limit) => {
    return request({
      url: '/api/v1/...',
      data: {
        limit
      },
    })
  },
  
}

在页面中使用如下:

import API from '../../common/api.js'

Page({
  data: {
  },

  onLoad: function (options) {
    // 获得热门股票列表
    API.getHotCodeHistory(6).then((data) => {
      console.log('获取数据')
    })
  },
})

7. 小程序设置某一个页面的背景色用哪个属性?

  这里一般都是在当前页面的wxss里面直接设置page的background-color。

  Tips:也可能问的是某页面的窗口背景色,这个要用到官方的json配置中backgroundColor,窗口背景色即指窗体下拉刷新或上拉加载时露出的背景,在模拟器是看不到,真机上就能看到。

page {
    background-color: #eee;
}

8. 表单填写完之后提交数据,如何获得数值?通过什么方法,比如说input输入值之后失去焦点触发方法?拿到的这个值(对象)怎么赋值?原生写法

  可以抄通过在提袭交按钮上绑定点击事件来实现。例如

<input type='submit' value='submit' onclick='show()'/>

<scrippt>
    function show() {
        var sex=document.getElementById("sex").value;
    }
</scrippt>

  如果问的是提交表单后请求json后返回的数据,就可以说是ajax做一个请求然后赋值(反正我是这么理解的,这个问题主题不明确。。)

9. 小程序获取定位的API和实名认证?

  获取定位API官方:developers.weixin.qq.com/miniprogram…

  关于获得实名认证这一块,以前可能有出过相关API,但后面因为涉及隐私就被下掉了,目前到现在是没看过有提供相关的API或者服务端接口。像摩拜那种能一键快速实名认证估计是因为微信自家产品定制吧。。

10. 小程序如何跳转另外一个小程序?

  首先,在app.json里面配置navigateToMiniProgramAppIdList(是一个数组),填写要跳转小程序的appid。然后在对应跳转的页面js中使用wx.navigateToMiniProgram即可跳转,具体如下:

//  app.js
{
  "navigateToMiniProgramAppIdList": [
    "这里填appId",
  ],
}

// index.js页面
// 点击小程序
  go() {
    wx.navigateToMiniProgram({
      appId: '填要跳转的小程序appId',
      path: '填要跳转的小程序页面路径,如pages/index',
      success(res) {
      }
    })
  },

  正式的可以跳预览版或体验版吗(不可以)预览可以跳预览吗(不可以)

  体验版可以跳正式版吗(可以)不同公众号关联之间的正式版小程序可以相互跳转吗(可以)

11. 小程序bindtap和cacthtap之间有什么作用和区别? 

(1) 相同点:首先他们都是作为点击事件函数,就是点击时触发。在这个作用上他们是一样的,可以不做区分。

(2) 不同点:他们的不同点主要是bindtap是冒泡的,catchtap是非冒泡的。

以冒泡事件tap(手指触摸后马上离开,也就是点击事件)为例子来区别bind和catch事件

bindtap? 事件绑定不会阻止冒泡事件向上冒泡

catchtap? 事件绑定可以阻止冒泡事件向上冒泡

注:子元素用bindtap绑定事件后,执行的时候,会冒泡到父元素(触发父亲元素上绑定的bindtap事件)如果不想冒泡到父元素,可以用catchtap代替

12. 小程序一个页面跳转到下一个页面,在下一个页面做了操作之后,跳回上一个页面,通过哪些方法让上一个页面重新获取数据?

  在返回目标页面的onShow生命周期,或者在返回页的onUnload生命周期wx.navigateTo(跳转API)成功后回调获取。

  更深入得去说还可以用getCurrentPages,具体如下blog.csdn.net/WangYangsea…

  (有的面试官会说能用插件。。关于这点我是不知道需要用哪些插件来搞,原生就足够便利了。。感觉纯碎多余)

Tips:如果是在有底部tabBar的情况下,在返回页的onUnload生命周期中使用wx.switchTab(跳转tab页面)的回调函数中获取数据。

13. 小程序的wxml和html标签有什么不一样?wxss和css的区别?(尺寸单位使用不一致)

  wxml和html标签有什么不一样:如和

等。

  wxss和css的区别:最大区别为尺寸单位使用不一致,小程序用rpx。其次举例:小程序background-imgae属性,不能用本地路径,必须用网络路径。

标签参考资料:blog.csdn.net/Strawberry_…

14.小程序之间数据传递有哪几种传递方式?页面之间,组件之间

  页面之间:跳转路由url带参数传递,或者在app.js中设置全局变量app.globalData,还有本地缓存 wx.setStorageSync

  组件之间:可以通过监听事件,用triggerEvent触发传递。可以在properties中绑定变量值,然后在父组件中直接传递。如:

15. 小程序引入模板?在组件中引入?

  引入模版:developers.weixin.qq.com/miniprogram…

  引入组件:需要在json中的usingComponents配置组件路径和命名,才能在wxml中使用。更多:developers.weixin.qq.com/miniprogram…

16. 小程序模板里面可以用indexOf去做判断隐藏显示吗?

  严格上来说小程序是不支持用indexOf做隐藏显示的。因为mastache语法不支持js语言,包括Object.keys()和toString(),即在页面标签中,使用以下js方法无效

Tips:如果非要这么做,那么只能通过WXS(脚本语言)做,例如

// .wxs文件

function indexOf(arr, va l) {
    if (arr.indexOf(val) < 0) {
        return false;
    } else {
        return true;
    }
}
module.exports.indexOf = indexOf;

// 引入
<wxs src="../../utils/util.wxs" module="tools" />

// 使用
<view>{{tools.indexOf([1, 2, 3, 6, 9], 6) ? '包含' : '不包含'}}</view>

17. 小程序里面如何去做过滤?比如传过来的是时间戳,但是要求格式是2020-XX-XX。拿到的是时间戳,怎么转换为时间格式?写在哪里?

  时间戳转换成时间格式,可以采用new Date()之后,分别用getFullYear()、getMonth()、getDate()、getHours()、getMinutes()、getSeconds()等获得对应的值然后拼接。写在一个function中,在需要的地方调用和传入时间戳。

 Tips:也可以通过分别除以1000和60分别依次计算出结果。

18. 微信小程序wxss设置background的url后读取不到本地文件?

答:需要用网络地址,不能直接用相对/绝对路径设置图像背景哦。

19. 微信小程序在IOS/真机上出现左右上下滑动页面出现空白解决?或者怎么禁止橡皮筋效果

答:空白解决:在wxss中page标签加入overflow-x:hidden。

  禁止橡皮筋:在对应页面的page.json中设置style: { disableScroll: true }

20. 微信小程序头部Bar栏怎么去除?也就是不要它自带的标题栏

答:在不需要标题栏的文件页面json中加入"navigationStyle":"custom",则会消除掉标题栏,只留下右上角的胶囊按钮。

21. 去除头部Bar栏后,怎么自定义导航栏高度并且适应各个机型

答:确定json的navigationStyle为custom,先用getSystemInfoSync获取手机机型,并用getMenuButtonBoundingClientRect获取胶囊位置,由此计算

  导航栏高度 = 状态栏到胶囊的间距(胶囊距上距离-状态栏高度) * 2 + 胶囊高度 + 状态栏高度

22. 如何转换rpx与px之间的关系,适配各类机型。

答:需要先getSystemInfo获得当前设备的屏幕宽度windowWidth,用iPhone6的750为基础进行计算。具体如下

onLoad () {
    wx.getSystemInfo({
      success (res) {
        const windowWidth = res.windowWidth // 这里输出的单位是px
        // 假如是平移666rpx,则计算如下,以此类推
        console.log(666 / 750 * windowWidth)
      }
    })
  },

23.在微信小程序的最后一个父元素中出现图片背景或者图片定位成背景的时候,底部总有一条小白边?

可以尝试在这张图片的CSS中加入vertical-align:top; 或者在当前页面的page写入{height:100%; overflow:hideen;}

24.使用微信小程序的组件标签button时,在开发者工具显示正常,在真机上出现压缩或变大的情况。

  因为小程序button等标签自带了部分CSS属性,所以最好是先覆盖掉原来的,button部分覆盖如下:(特别注意有些button因为不同type会出现下面:not的类)  

button {
  border: none !important;
  width: 0;
  height: 0;
  background-color: none;
  color: none;
  padding: 0;
}

button:not([size='mini']) {
  min-height: 0;
}

25.小程序在一些苹果机上底部tabbar被安全区(黑色线)挡住。

  目前采用wx.getSystemInfo获得机型为iPhoneX系列的,更改底部tabbar的CSS,否则默认做为适配方法。

wx.getSystemInfo({
      success: res=>{
        let modelmes = res.model
        if (modelmes.search('iPhone X') != -1) {
          this.setData({
            isIphoneX: true
          })
        }
      }
})

26.小程序imgae跟view有一段距离,设置margin为0也不能消除。

  设置img的display为block,或者设置父元素的font-size为0

27.怎么更改小程序swiper自带的提示点CSS。

.swiper .wx-swiper-dots.wx-swiper-dots-horizontal{
     margin-bottom: 2rpx;
}
.swiper .wx-swiper-dot{
    width:40rpx;
    display: inline-flex;
    height: 10rpx;
    margin-left: 20rpx;
    justify-content:space-between;
}
.swiper .wx-swiper-dot::before{
    content: '';
    flex-grow: 1; 
    background: rgba(255,255,255,0.8);
    border-radius: 8rpx
}
.swiper .wx-swiper-dot-active::before{
    background:rgba(244,0,0,0.8);   
}

28. 自定义小程序navigationStyle头部bar怎么适配各种机型。

  确定json的navigationStyle为true。然后在app.js中加入下列代码即可。(极少部分特殊机型需要上下加一两个像素做容差匹配)

App({
  onLaunch: function (options) {
  const that = this;
    // 获取系统信息
    const systemInfo = wx.getSystemInfoSync();
    // 胶囊按钮位置信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    // 导航栏高度 = 状态栏到胶囊的间距(胶囊距上距离-状态栏高度) * 2 + 胶囊高度 + 状态栏高度
    that.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
    that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
    that.globalData.menuHeight = menuButtonInfo.height;
    that.globalData.menuTop = menuButtonInfo.top;
  },
  globalData: {
    navBarHeight: 0, // 导航栏高度
    menuRight: 0, // 胶囊距右方间距(方保持左、右间距一致)
    menuHeight: 0, // 胶囊高度(自定义内容可与胶囊高度保证一致)
    menuTop: 0 // 导航胶囊距上间距
  }
})

  在对应页面上使用如下代码

const app = getApp()

Page({
  data: {
    navigationHeight: app.globalData.navBarHeight ? app.globalData.navBarHeight : 0, // 自定义导航栏高度
    navigationTop: app.globalData.menuTop, // 导航胶囊距上间距
    navigationRight: app.globalData.menuRight, // 导航胶囊距右间距
     menuHeight: app.globalData.menuHeight // 胶囊高度
  },
})

29. 小程序https或websocket接口在模拟器上正常,在真机上请求出现Provislonal headers are shown的提示性错误导致获取不到数据或连接超时。

  可能是SSL证书引起的,检查SSL证书是否无误或有无过期,同时记得在后台request确认协议和域名无误。如果websocket一直不行,建议采用https模式进行请求。网上查过资料也有网友说可以用axios代替request请求就可以。客官不妨试下

30. 使用scroll-view中的scroll-into-view失效,或scroll-into-view只触发了一次。

  1、scroll-view必须设置上scroll-y或者scroll-x为true

  2、scroll-view必须设置高度。

  3、scroll-into-view初始化设置的时候,可能因为页面或者数据未加载不能跳转。需要在js里手动setData一下。

  4、每次复制给scroll-into-view的值必须不同,因每次赋值相同则不会二次触发跳转。如果是相同值则最好在首次跳转后延时清空对应的变量。

31. 小程序的textarea标签赋值value后没有显示出value值。

  注意是否把disabled设置为true了,即禁用了输入框,禁用输入框后是不能显示赋值value的,可以在赋值给到之后再把disabled设置为true。也就是先赋值再禁用。

32. 在小程序中如何保存自定义二维码图片或海报:www.cnblogs.com/xiaozhu007/…

33. 小程序使用图表Antv:www.cnblogs.com/xiaozhu007/…

34.  小程序生成自定义分享转发图并进行转发:www.cnblogs.com/xiaozhu007/…