微信小程序的基础语法(必看)

1. 简述微信小程序的运行机制

热启动 :假如⽤户已经打开了某个⼩程序,在⼀定时间内再次打开⼩程序的话,这个时候我们就不再需要重新启动了,这需要把我们的后台打开的⼩程序切换到前台来使⽤。
冷启动:⽤户⾸次打开⼩程序或被微信主动销毁再次打开的情况,此时⼩程序需要重新加载启动。

2. 分析一下小程序的优劣势

优势:

  1. 无需下载,通过搜索和扫一扫就可以打开

  2. 良好的用户体验:打开速度快

  3. 开发成本比App要低

  4. 安卓上可以添加到桌面,与原生App差不多

  5. 为用户提供良好的安全保障。

劣势:

  1. 限制较多。

  2. 样式单一。

  3. 推广面窄,不能分享朋友圈,

  4. 依托于微信,无法开发后台管理功能

3. 简单描述下微信小程序的相关文件类型

微信小程序项目结构主要有四个文件类型,如下:

1.WXML可以构建出页面的结构
2.WXSS 是一套样式语言,用于描述 WXML 的组件样式
3.js逻辑处理,网络请求
4.json小程序配置文件
5.app.json作为配置文件入口,整个小程序的全局配置。
6.app.js必须要有这个文件,没有也是会报错
7.app.wxss全局页面样式设置,在app.wxss中设置的样式可以在小程序的所有页面生效

4. 请谈谈小程序的生命周期函数

  • onLoad():页面加载时触发

  • onShow():页面显示/切入前台时触发

  • onReady():页面初次渲染完成时触发

  • onHide():页面隐藏/切入后台时触发

  • onUnload():页面卸载时触发

  • onPullDownRefresh():下拉刷新的钩子函数

  • onReachBottom():上翻到底的钩子函数

5. 请谈谈小程序的组件生命周期函数

  • created():组件实例刚刚被创建好时触发。

  • attached():在组件完全初始化完毕、进入页面节点树后触发。

  • detached() 组件离开页面节点树后触发。

6. 微信小程序中的路由及其区别

// wx.navigateTo():保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面 
​
// wx.redirectTo():关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面 
​
// wx.switchTab():跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 
​
// wx.navigateBack()关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层 
​
// wx.reLaunch():关闭所有页面,打开到应用内的某个页面

7. 说出小程序当中常用的UI组件

  • 视图容器组件:viewswiperswiper-item

  • 基础内容组件:texticonrich-text

  • 表单组件:buttonform checkboxinput

  • 导航组件:navigator

  • 媒体组件:image

8. 谈一谈你对wxs的理解

  • 概念:wxs(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构

  • 特点:

    • 没有兼容性

    • 与JavaScript不同

    • 隔离性

      不能作为事件回调

    • ios设备上比javascript运行快

    • wxs遵循CommonJs模块化规范

  • 支持的数据类型:

    • number:数值类型

    • string:字符串类型

    • boolean:布尔类型

    • object:对象类型

    • function:函数类型

    • array:数组类型

    • date:日期类型

    • regexp:正则

9. 简述一下wx:if和hidden的区别

1.`wx:if `动态创建或销毁对应的UI结构
2.`wx:if `条件为 false,什么也不做;为true时,才开始局部渲染
3.`hidden `简单的控制组件的显示与隐藏
4.`wx:if `有更高的切换消耗而 `hidden `有更高的初始渲染消耗。频繁切换的情况下,用 `hidden `更好,运行时条件不大可能改变则 `wx:if` 较好。

10. 说出小程序中父子组件通信的三种方式

  • 属性绑定:用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容的数据

  • 事件绑定:用于子组件向父组件传递数据,可以传递任意数据

  • 获取组件实例:父组件还可以通过this.selectComponent() 获取子组件实例对象,这样就可以直接访问子组件的任意数据和方法

11. 什么是分包加载,如何使用分包加载

  1. 1.概念 减少首屏加载时间,用户在使用时按需进行加载
    2.使用
        1. 在app.json中配置项目分包结构
        2. 配置`subpackages`属性
            subpackages: {
                "root": "分包的根目录",
                "pages": [""] // 需要按需加载的包所在路径
            }

12. 小程序中如何自定义组件

  1. 在根目录新建一个components文件夹,然后在这个文件夹下放置自定义的组件

  2. 需要用到某个自定义组件时,就在它里面的json文件中配置 "component": true

  3. 在父组件的json文件中的usingComponents中导入这个组件

    usingComponents: {
        "自定义组件名": "自定义组件所在路径"
    }

13. 小程序中如何自定义tabBar

  1. app.json 中的 tabBar 项指定 custom 字段

  2. 在所有 tab 页的 json 里声明 usingComponents 项,或者在 app.json 中全局开启

  3. 在代码根目录下创建custom-tab-bar文件夹,里面放自定义的tabBar文件

  4. 编写tabBar代码

14. ⼩程序WXSS与CSS 的区别

wxss 背景图⽚只能引⼊外链,不能使⽤本地图⽚

⼩程序样式使⽤ @import 引⼊ 外联样式⽂件,地址为相对路径。

尺⼨单位为 rpx , rpx 是响应式像素,可以根据屏幕宽度进⾏⾃适应。

15. ⼩程序的双向绑定和Vue哪⾥不⼀样?

⼩程序 直接使⽤this.data.key = value 是不能更新到视图当中的。必须使⽤ this.setData({ key :value }) 来更新值

16. 在wepy中如何将异步API promise化

  1. 下载模块@wepy/use-promisify

    npm i @wepy/use-promisify
  2. 在app.wpy中引入该模块

    import promisify from '@wepy/use-promisify'
  3. 在app.wpy中,将promisify方法挂载到wepy上

    wepy.use(promisify)
  4. 使用

    wepy.wx.request('url地址')

17. ⼩程序怎么实现下拉刷新

两种⽅案

⽅案 ⼀ :

通过在 app.json 中, 将 "enablePullDownRefresh": true, 开启全局下拉刷新。

或者通过在 组件 .json , 将 "enablePullDownRefresh": true, 单组件下拉刷新。

⽅案⼆:

scroll-view :使⽤该滚动组件 ⾃定义刷新,通过 bindscrolltoupper 属性, 当滚动到顶部/左边,会触发 scrolltoupper事件,所以我们可以利⽤这个属性,来实现下拉刷新功能。

18. 使用wepy框架初始化项目的步骤

  1. 下载项目模板

    npm i standard 项目名(mypro)
  2. 进入到项目目录

    cd mypro
  3. 下载依赖

    npm i
  4. 运行项目

    npm run dev

19. bindtap和catchtap区别

相同点: 都是点击事件

不同点: bindtap 不会阻⽌冒泡, catchtap 可以阻⽌冒泡。

20. ⼩程序怎么跟随事件传值

在 ⻚⾯标签上通过 绑定 dataset-key = value , 然后绑定点击通过e.currentTarget.dataset.key 来获取标签上绑定的值

<button bindtap="get" data-name="测试"> 拿到传值</button> 
​
get(e){ console.log(e.currentTarget.dataset.name) },

21. uni-app的配置文件、入口文件、主组件、页面管理部分

pages.json  配置文件
main.js     入口文件
App.vue     主组件
pages       页面管理部分

22. 如何封装⼩程序请求

封装 wx.request 请求传递需要的参数( url , data , method , success 成功回调 , fail 失败回调 ) , 封装常⽤⽅法 POST , GET , DELETE , PUT .... 最后导出这些⽅法然后新建⼀个 api.js ⽂件,导⼊封装好的⽅法,然后调取相应的⽅法,传递数据。

封装:

var app = getApp(); //获取⼩程序全局唯⼀app实例
var host = '******************'; //接⼝地址
​
//POST请求
function post(url, data, success,fail) 
{ 
    request(url, postData, "POST", doSuccess, doFail);
}
//GET请求
function get(url, data, success, fail) 
{ 
    request(url, postData, "GET", doSuccess, doFail);
}
function request(url, data, method, success, fail) 
{ 
    wx.showLoading({ title: "正在加载中...", }) 
    wx.request({
        url: host + url, //请求地址 
        method: method, //请求⽅法 
        header: { //请求头 
            "Content-Type": "application/json;charset=UTF-8" 
        },
     data: data, //请求参数  
     dataType: 'json', //返回数据格式 
     responseType: 'text', //响应的数据类型
     success: function(res) { //成功执⾏⽅法,参数值为res.data,直接将返回的数据传⼊ 
         wx.hideLoading(); 
         success(res.data); 
     },
     fail: function() { //失败执⾏⽅法 fail(); },
    })
 }
 module.exports = { postRequest: post, getRequest: get,}

组件使⽤ 封装好的请求:

var http = require('../../utils/request.js'); //相对路径  
var params = {//请求参数 id:this.data.userId}
http.postRequest("user/delUser", params, function(res) { console.log("修改成功!"); }, function(res) { console.log("修改失败!!!")})

总结:

在src目录中新建一个utils目录,在目录中新建一个request.js,在request.js中首先获取整个小程序的实例来保证能调用wx所有方法,定义get和post等请求的方法,然后在get或者post请求的方法中设置wx.showToast(),然后通过wx.request来实现get或者post请求,在success中,关闭loading,然后通过回调的形式返回拿到的数据

调用:

首先要导入包

var http=require("../utils/request.js")

在方法中通过http.get方法(参数,回调)来调用

23. uniapp获取地理位置的API是什么?

  • uni.getLocation()

24. ⼩程序有哪些传递数据的⽅法

  • 1.使⽤全局变量

    在 app.js 中的 this.globalData = { } 中放⼊要存储的数据。在 组件.js 中, 头部 引⼊ const app = getApp(); 获取到全局变量直接使⽤ app.globalData.key 来进⾏赋值和获取值。

    使⽤ 路由wx.navigateTo 和 wx.redirectTo 时,可以通过在 url 后 拼接 + 变量, 然后在 ⽬标⻚⾯ 通过在 onLoad 周期中,通过参数来获取传递过来的值。

    使用本地存储

25. 分别说出vue、小程序、uni-app中的本地存储数据和接受数据是什么

  • vue:

    • 存储:localstorage.setItem

    • 接收:localstorage.getItem

  • 微信小程序:

    • 存储:wx.setStorage/wx.setStorageSync

    • 接收:wx.getStorage/wx.getStorageSync

  • uni-app:

    • 存储:uni.setStorage

    • 接收:uni.getStorage

26. app.json全局配置⽂件描述

pages : ⽤于存放当前⼩程序的所有⻚⾯路径

window : ⼩程序所有⻚⾯的顶部背景颜⾊,⽂字颜⾊配置。

tabBar : ⼩程序底部的 Tab ,最多5个,最少2个。

27. uni-app如何监听页面滚动

  • 使用onPageScroll监听

28. 如何让图片宽度不变,高度自动变化,保持原图片宽高比不变

  • 给image标签添加 mode='widthFix'

29. ⼩程序什么时候会主动销毁?

⼩程序在进⼊后台之后,客户端会帮我们在⼀定时间内维持我们的⼀个状态,超过五分钟后,会被微信主动销毁.官⽅也没有明确说明 什么时候销毁, 在不同机型表现也不⼀样,2019年开发时:时间官⽅⽂档没有说明,但是经过询问⼀般指5分钟内2020年开发时:时间官⽅⽂档没有说明,实测安卓没有固定时间,内存⾜够情况下,有时候⼀天了还在,有时候⼏分钟就没了

30. uniapp进行条件编译的两种方法?小程序端和H5的代表值是什么?

  • 条件编译的两种方法

    • #ifdef

    • #ifndef

  • 小程序端和H5的代表值

    • H5:H5

    • MP-WEIXIN:微信小程序

  • 18
    点赞
  • 144
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值