微信小程序问题及解决_微信小程序show只能用一次吗-CSDN博客

.WXML：是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
内部主要是微信自己定义的一套组件

.WXSS：(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
但是他跟css有一定的区别，例如单位、css使用px、wxss使用rpx

.js：逻辑处理，网络请求。

.json：小程序设置，如页面注册，页面标题及tabBar

2、微信小程序主要目录和文件的作用

project.config.json 项目配置文件，用得最多的就是配置是否开启https校验；

App.js 他里面有生命周期，onlaunch在这个文件中,设置一些全局的基础数据等；

App.json 微信框架的配置文件入口，整个小程序的全局配置。包括页面注册，网络设置，以及小程序的window背景色，配置导航条样式，默认标题等。pages配置页面路径、window配置小程序的自定义颜色默认标题等,底部tab, 标题栏和路由等设置；

App.wxss 公共样式,全局样式配置，非必须文件，引入iconfont等；

pages 里面包含一个个具体的页面；

index.json (配置当前页面标题和引入组件等)；

index.wxml (页面结构)；

index.wxss (页面样式表)；

index.js (页面的逻辑，请求和数据处理等)；

3、微信小程序生命周期函数

onLoad——页面加载时触发，只会调用一次，可获取当前页面路径中的参数

onShow——页面显示，每次打开页面都调用

onReady——初次渲染完成，调一次

onHide——页面隐藏，当navigateTo或底部tab切换时调用

onUnload——页面卸载，当redirectTo或navigateBack时调用

4、微信小程序页面跳转

wx.navigateTo：在当前窗口打开新页面，并可以通过返回按钮返回上一页。

wx.redirectTo：关闭当前窗口，跳转到应用内的某个页面。

wx.switchTab：关闭所有页面，跳转到应用内的某个标签页。

wx.reLaunch：关闭所有页面，重新打开应用的首页或某个页面。

wx.navigateBack：返回上一个页面。

5、微信小程序原理

小程序分为两个部分webview和appService，webview用来展现UI，appService用来处理业务逻辑、数据及接口调用，它们在两个进程中运行，通过系统层JSBridge实现通信，完成UI渲染、事件处理

6、封装微信小程序的数据请求

在根目录下创建utils目录及api.js文件和apiConfig.js文件；

在apiConfig.js 封装基础的get, post 和 put， upload等请求方法，设置请求体，带上token和异常处理等；

在api中引入apiConfig.js封装好的请求方法，根据页面数据请求的urls, 设置对应的方法并导出；

在具体的页面中导入；

7、微信小程序页面传递数据的方法

1、给html元素添加data-*属性来传递值，然后通过e.currentTarget.dataset或onload的param参数获取。

注：data-名称不能有大写字母、不可以存放对象

2、设置id的方法标识来传值，通过e.currentTarget.id获取设置的id的值，然后通过设置全局对象的方式来传递数值

3、在navigator中添加参数数值

或

1、使用全局变量实现数据传递

2、页面跳转或重定向时，使用url带参数传递数据

3、使用组件模板template传递参数

4、使用缓存传递参数

5、使用数据库传递参数

8、webview中的页面怎么跳回小程序中

先在管理后台配置域名白名单，再要引入最新版的jweixin-1.3.2.js，然后

wx.miniProgram.navigateTo({ url: '/pages/login/login'+'$params' })

9、微信小程序关联微信公众号如何确定用户的唯一性

使用wx.getUserInfo方法 withCredentials为true时，可获取encryptedData，里面有union_id.后端需要进行对称解密。

10、微信小程序和微信小程序之间的跳转

wx.navigateToMiniProgram,参数需要目标小程序的appid

11、如何实现下拉刷新

先在app.json或page.json中配置enablePullDownRefresh:true

page里用onPullDownRefresh函数，在下拉刷新时执行

在下拉函数执行时发起数据请求，请求返回后，调用wx.stopPullDownRefresh停止下拉刷新的状态

12、bindtap和catchtap的区别

bindtap不会阻止冒泡，catchtap会阻止冒泡

13、使用webview直接加载要注意哪些事项

①必须要在小程序后台使用管理员添加业务域名；

②h5页面跳转至小程序的脚步必须是1.3.1以上；

③微信分享只可以是小程序的主名称，如要自定义分享内容，需小程序版本在1.7.1以上；

④h5的支付不可以是微信公众号的appid，必须是小程序的appid，而且用户的openid也必须是用户和小程序的

14、微信小程序dom操作

即使是小程序，也难免有dom操作
wx.createSelectorQuery() 返回一个SelectorQuery对象实例
nodesRef.boundingClientRect([callback])
nodesRef.scrollOffset([callback])
nodesRef.fields(fields, [callback])
selectorQuery.in(component) 将选择器的选取范围更改为自定义组件component内
selectorQuery.select(selector) 在当前页面下选择第一个匹配选择器selector的节点，返回一个NodesRef对象实例，可以用于获取节点信息
selectorQuery.selectAll(selector) 在当前页面下选择匹配选择器selector的节点，返回一个NodesRef对象实例。它选择所有匹配选择器的节点。
selectorQuery.selectViewport() 选择显示区域，可用于获取显示区域的尺寸、滚动位置等信息，返回一个NodesRef对象实例
selectorQuery.exec([callback]) 执行所有的请求，请求结果按请求次序构成数组，在callback的第一个参数中返回

15、微信小程序原生组件

视图容器类组件：view、scroll-view、swiper、movable-area、cover-view等。
基础内容类组件：text、rich-text、icon、progress、button等。
表单类组件：form、input、textarea、checkbox、radio、switch、picker、slider、label等。
导航类组件：navigator、functional-page-navigator、audio、image等。
媒体组件：camera、live-player、video、map等。
开放能力类组件：canvas、ad、official-account等。
菜单类组件：navigation-bar、tab-bar、tab-content等。
画布类组件：movable-view、cover-image等。

16、微信小程序用户授权

1、获取用户授权设置：首先，你可以使用wx.getSetting()方法获取当前用户的授权设置。这个方法返回一个对象，其中包含了用户对小程序各项权限的授权状态。

2、检查授权状态：通过wx.getSetting()返回的授权设置对象，你可以检查用户是否已经授权了相应的权限。例如，如果你想要获取用户的用户信息，可以检查scope.userInfo的值来判断用户是否已经授权了用户信息权限。

3、发起授权请求：如果用户还未授权相应的权限，你可以调用wx.authorize()方法发起授权请求。该方法接受一个scope参数，指定要授权的权限类型。例如，如果要获取用户信息权限，可以将scope参数设置为"scope.userInfo"。

4、处理授权结果：当用户确认或拒绝授权后，你可以通过回调函数获得授权结果。你可以在调用wx.authorize()时传入一个回调函数，在回调函数中处理用户的授权结果
// 获取用户授权设置
wx.getSetting({
  success(res) {
    const userInfoAuth = res.authSetting['scope.userInfo'];

    // 检查用户授权状态
    if (userInfoAuth === undefined) {
      // 用户未授权用户信息权限，发起授权请求
      wx.authorize({
        scope: 'scope.userInfo',
        success() {
          // 用户授权成功
          getUserInfo();
        },
        fail() {
          // 用户拒绝授权或授权失败
          // 可以在这里给用户一些提示或提醒进行授权操作
        }
      });
    } else if (userInfoAuth === true) {
      // 用户已经授权用户信息权限
      getUserInfo();
    } else {
      // 用户拒绝了用户信息授权
      // 可以在这里给用户一些提示或提醒进行授权操作
    }
  }
});

// 获取用户信息
function getUserInfo() {
  wx.getUserInfo({
    success(res) {
      const userInfo = res.userInfo;
      // 在这里可以处理用户信息数据
    },
    fail() {
      // 获取用户信息失败
    }
  });
}
以上代码中，先使用wx.getSetting()方法获取用户的授权设置，并根据授权状态判断是否需要发起授权请求。如果用户已经授权，则可以直接调用wx.getUserInfo()方法获取用户信息。否则，使用wx.authorize()方法发起授权请求，用户确认后会触发相应的回调函数。

17、微信小程序拉起支付

wx.requestPayment({
  timeStamp: '支付参数中的时间戳',   // 时间戳，需与支付参数保持一致
  nonceStr: '支付参数中的随机字符串',  // 随机字符串，需与支付参数保持一致
  package: '支付参数中的包信息',      // 包信息，需与支付参数保持一致
  signType: '支付参数中的签名类型',    // 签名类型，需与支付参数保持一致
  paySign: '支付参数中的签名',        // 签名，需与支付参数保持一致
  success(res) {
    // 支付成功回调函数
    console.log('支付成功');
    // 进行支付成功后的业务逻辑处理
  },
  fail(res) {
    // 支付失败回调函数
    console.log('支付失败');
    // 进行支付失败后的处理，如提示用户支付失败并进行相应操作
  }
});

18、微信小程序分享

1.在小程序页面配置分享信息：需要在小程序的页面配置文件（如page.json）中添加"shareAppMessage"字段，在该字段中配置分享标题、路径等相关信息，以及"canShareToTimeline"字段设置为true来开启分享到朋友圈的功能。
{
  "shareAppMessage": {
    "title": "分享标题",
    "path": "/pages/index/index"
  },
  "canShareToTimeline": true
}
2.调用分享接口：在界面中触发分享操作时，可以调用wx.showShareMenu()方法来显示分享菜单，以便用户选择分享方式。然后使用wx.onShareAppMessage()方法自定义分享内容。
// 显示分享菜单
wx.showShareMenu({
  withShareTicket: true
});

// 自定义分享内容
wx.onShareAppMessage(function () {
  return {
    title: '自定义分享标题',
    path: '/pages/index/index'
  };
});
3.分享到群：如果想要实现分享到群的功能，可以利用小程序提供的shareTicket参数。当用户通过转发消息进入小程序时，可以在接收到的事件对象中获取到shareTicket，然后调用wx.getShareInfo()方法传入shareTicket参数来获取群信息。

19、微信小程序制作海报

1、设计海报样式：使用设计工具（如Photoshop、Sketch等）创建或编辑所需的海报样式。确保尺寸适配小程序页面，并包含所需的文本、图片和艺术元素。

2、将设计转化为小程序页面：在微信小程序中创建一个新的页面，用于展示海报图片和分享功能。

3、导入海报图片：将设计好的海报图片导入到小程序的项目目录中，通常放置在/images文件夹下。

4、在小程序页面中加载海报：在页面的WXML文件中，使用<image>标签来显示海报，设置src属性为海报图片的路径。
<image src="/images/poster.jpg"></image>
5、实现分享功能：根据小程序的要求，在页面中调用相应的接口实现分享功能，例如调用wx.showShareMenu()方法显示分享菜单，再通过wx.onShareAppMessage()方法自定义分享内容。

6、添加保存海报功能：为用户提供保存海报的功能，可以在页面中添加一个点击按钮或者其他触发事件的元素，然后在对应的事件处理函数中使用wx.canvasToTempFilePath()方法将海报绘制到画布上并保存为临时文件，最后调用wx.saveImageToPhotosAlbum()方法将临时文件保存到相册。
// 点击保存按钮触发的事件处理函数
onSavePoster: function() {
  wx.canvasToTempFilePath({
    x: 0,
    y: 0,
    width: posterWidth,
    height: posterHeight,
    destWidth: posterWidth * dpr,
    destHeight: posterHeight * dpr,
    canvasId: 'posterCanvas',
    fileType: 'jpg', // 可根据需求改变图片格式
    quality: 1, // 图片质量，取值范围为 0.1 - 1.0
    success: function (res) {
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: function () {
          wx.showToast({
            title: '保存成功',
            icon: 'success',
            duration: 2000
          });
        },
        fail: function () {
          wx.showToast({
            title: '保存失败',
            icon: 'none',
            duration: 2000
          });
        }
      });
    }
  });
}

20、微信小程序怎么进行网络请求

微信小程序支持GET,POST等请求。用method可以设置.
微信小程序提供了 wx.request(Object object) 这个API，用于发送网络请求，该API接受一个对象作为参数，该对象包含多个属性，其中常用的有：

url，请求的地址，string类型，必填。
data，请求的参数，可以是一个字符串或一个对象，非必填。
method，请求的方法，string类型，默认值是"GET"。
success，请求成功的回调函数，非必填。
fail，请求失败的回调函数，非必填。

getInfo(){
    vxwx.request({
      url: 'https://www.escook.cn/api/get',
      method:'GET',
      data:{
        name: 'zs',
        age:20
      },
      success:(res) => {
        console.log(res.data)
      }
    })
  },

21、提高微信小程序的应用速度

a、提高页面加载速度

b、用户应为预测

c、减少默认data的大小

d、组件化方案

22、微信小程序的优劣势

优势：

1、无需下载，通过搜索和扫一扫就可以打开。

2、良好的用户体验：打开速度快。

3、开发成本要比App要低。

4、安卓上可以添加到桌面，与原生App差不多。

5、为用户提供良好的安全保障。小程序的发布，微信拥有一套严格的审查流程，不能通过审查的小程序是无法发布到线上的。

劣势：

1、依托微信，不能开发后台管理功能；

2、大小限制不能超过2M，不能打开超过5个层级的页面

23、微信小程序与H5的区别

①运行环境不同（小程序在微信运行，h5在浏览器运行）；

②开发成本不同（h5需要兼容不同的浏览器）；

③获取系统权限不同（系统级权限可以和小程序无缝衔接）；

④应用在生产环境的运行流畅度（h5需不断对项目优化来提高用户体验）；

24、微信小程序的wcss和css有哪些不一样的地方

选择器限制：wcss只支持部分CSS选择器，例如类选择器、标签选择器和ID选择器，但不支持伪类选择器（如:hover、:active）和部分复杂的选择器。
属性名使用：wcss中的属性名以驼峰命名法表示，而在CSS中使用短横线连接的方式。
单位限制：wcss目前仅支持rpx作为长度单位，而CSS支持更多单位选项，如px、em、rem等。
样式作用域：在wcss中，默认情况下，样式只应用于当前页面，而在CSS中，样式可以同时应用于整个网站或应用程序。
文件引用方式：在小程序开发中，wcss文件可以直接在XML文件中引用，而在Web开发中，CSS通常通过<link>或<style>标签引入。

25、wxml与标准的html的异同

标签名字有点不一样
多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
开发工具限制：WXML仅能在微信小程序开发工具中预览，而HTML可以在浏览器内预览
组件封装不同：WXML对组件进行了重新封装，为后续的性能优化提供了可能，同时避免开发者写出低质量的代码。
没有DOM树：小程序运行在JS Core内，没有DOM树和window对象，没有办法使用相关API。