微信小程序的基础语法(必看)
1. 简述微信小程序的运行机制
热启动 :假如⽤户已经打开了某个⼩程序,在⼀定时间内再次打开⼩程序的话,这个时候我们就不再需要重新启动了,这需要把我们的后台打开的⼩程序切换到前台来使⽤。 冷启动:⽤户⾸次打开⼩程序或被微信主动销毁再次打开的情况,此时⼩程序需要重新加载启动。
2. 分析一下小程序的优劣势
优势:
无需下载,通过搜索和扫一扫就可以打开
良好的用户体验:打开速度快
开发成本比App要低
安卓上可以添加到桌面,与原生App差不多
为用户提供良好的安全保障。
劣势:
限制较多。
样式单一。
推广面窄,不能分享朋友圈,
依托于微信,无法开发后台管理功能
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组件
视图容器组件:
view
、swiper
、swiper-item
基础内容组件:
text
、icon
、rich-text
表单组件:
button
、form
checkbox
、input
导航组件:
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.概念 减少首屏加载时间,用户在使用时按需进行加载 2.使用1. 在app.json中配置项目分包结构2. 配置`subpackages`属性subpackages: {"root": "分包的根目录","pages": [""] // 需要按需加载的包所在路径}
12. 小程序中如何自定义组件
在根目录新建一个
components
文件夹,然后在这个文件夹下放置自定义的组件需要用到某个自定义组件时,就在它里面的json文件中配置
"component": true
在父组件的json文件中的
usingComponents
中导入这个组件usingComponents: {"自定义组件名": "自定义组件所在路径" }
13. 小程序中如何自定义tabBar
在
app.json
中的tabBar
项指定custom
字段在所有 tab 页的 json 里声明
usingComponents
项,或者在app.json
中全局开启在代码根目录下创建custom-tab-bar文件夹,里面放自定义的tabBar文件
编写tabBar代码
14. ⼩程序WXSS与CSS 的区别
wxss 背景图⽚只能引⼊外链,不能使⽤本地图⽚
⼩程序样式使⽤ @import 引⼊ 外联样式⽂件,地址为相对路径。
尺⼨单位为 rpx , rpx 是响应式像素,可以根据屏幕宽度进⾏⾃适应。
15. ⼩程序的双向绑定和Vue哪⾥不⼀样?
⼩程序 直接使⽤this.data.key = value 是不能更新到视图当中的。必须使⽤ this.setData({ key :value }) 来更新值
16. 在wepy中如何将异步API promise化
下载模块
@wepy/use-promisify
npm i @wepy/use-promisify
在app.wpy中引入该模块
import promisify from '@wepy/use-promisify'
在app.wpy中,将
promisify
方法挂载到wepy上wepy.use(promisify)
使用
wepy.wx.request('url地址')
17. ⼩程序怎么实现下拉刷新
两种⽅案
⽅案 ⼀ :
通过在 app.json 中, 将 "enablePullDownRefresh": true, 开启全局下拉刷新。
或者通过在 组件 .json , 将 "enablePullDownRefresh": true, 单组件下拉刷新。
⽅案⼆:
scroll-view :使⽤该滚动组件 ⾃定义刷新,通过 bindscrolltoupper 属性, 当滚动到顶部/左边,会触发 scrolltoupper事件,所以我们可以利⽤这个属性,来实现下拉刷新功能。
18. 使用wepy框架初始化项目的步骤
下载项目模板
npm i standard 项目名(mypro)
进入到项目目录
cd mypro
下载依赖
npm i
运行项目
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:微信小程序
微信小程序的基础语法(必看)相关推荐
- 微信小程序那点事儿(必看踩坑实用解决BUG)------持续更新(2)
目录 wx.getSystemInfo(Object object) & Object wx.getSystemInfoSync() onShareAppMessage 分享 setNavig ...
- 微信小程序零基础入门(上)
目录 第一章.前言 1.1 小程序与网页开发的区别 1.2 首次开发小程序的准备工作 第二章.小程序基础结构了解 2.1 项目构成 2.1.1 项目的基本组成结构 2.1.2 小程序页面的组成部分 2 ...
- 微信小程序_基础组件学习02
微信小程序_基础组件学习02 swiper组件 swiper是滑块容器,也就是手机端的轮播图. swiper组件有两部分组成swiper和swiper-item. swiper-item需要放在swi ...
- 微信小程序开发基础教程
文章目录 1.什么叫做微信小程序 2.微信小程序开发功能特点 3.微信小程序开发流程 3.1 微信公众平台注册 3.2 微信开发者工具下载 3.3 微信开发者工具界面上的基本功能介绍 3.3.1 开发 ...
- 以微信小程序相册为例,看Serverless DevOps最佳实践
导语 | 近日,云+社区技术沙龙"高效智能运维"圆满落幕.本期沙龙围绕运维展开了一场技术盛宴,从AIOps.Serverless DevOps.蓝鲸PaaS平台.K8S等分享关于业 ...
- 微信小程序开发实战2 微信小程序编程基础
2.微信小程序编程基础 2.1小程序目录结构 小程序包含一个描述整体程序的主体部分和多个小程序页面.一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 文件 作用 app.js 小程序的入 ...
- 知乎爆赞!4504页《微信小程序零基础入门开发文档》+《小程序实战笔记》,你学废了吗?
前言 微信小程序作为近几年"微服务"的杰出代表,应用十分广泛.小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验 ...
- 微信小程序详解 php,微信小程序canvas基础详解
canvas 元素用于在网页上绘制图形.HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像.本文主要和大家分享微信小程序canvas基础详解,希望能帮助到大家. 一.了 ...
- 微信小程序开发多少钱 怎么看价格成本
按照功能来看,很多人还是感觉app功能会比较全面,但是小程序的功能也逐渐完善,就开发和维护成本来看,也是小程序受欢迎的原因之一.有些不可替代的事实不得不承认,APP游戏是小程序"玩" ...
最新文章
- C++拾趣——C++11的语法糖auto
- php编译html,将PHP模板文件编译为静态HTML页面的Ant任务
- JPA规范:一对多、一对一、多对多的双向关联与级联操作以及JPA联合主键
- c++ vs 输出log到窗口_欧冠豪门碰撞,尤文vs巴萨,曼联vs红牛
- matlab plot errorbar,如何为MATLAB errorbar plot的点和垂直线设置不同的图例?
- python数据结构与算法分析_数据结构和算法分析
- 一院士给博士生的一封信:每天工作12小时,这仅是一个下限!
- shell 选择对话框
- Xen的调度分析 (五) ——关于RTDS调度算法简介
- UBUNTU 编译安装GEOS
- python+pyqt4实现QQ自动发送信息
- 实验室设备管理系统mysql
- 远程小组软件开发过程(1):流程
- 阿里云Centos6数据盘扩容的问题处理
- 【易语言】微信跳一跳教程详细版,分分钟让新手学会的教程(附源码)
- Error inflating class androidx.constraintlayout.widget.ConstraintLayout
- 深富策略主力资金逆势突袭这个版块
- linux kde 黑屏,在manjaro-kde上nvidia开机黑屏解决办法
- 《乞力马扎罗山的雪》——海明威
- 基于Selenium实现的web自动化测试框架
热门文章
- 会计与python结合-Python 19会计(Z)
- python爬取妹子图片1_【爬虫】直接上干货-爬取妹子图整站图片
- IPv6/ICMPv6-原理介绍+报文分析+配置示例
- 职业生涯发展阶段包括哪些?应该如何规划?
- LinkedIn资深数据科学家黄申:人工智能不会一夜之间改变人们的生活
- Python语句结构(控制语句)
- 数显之家快讯:「SHIO世硕心语」曾国藩:人没格局,比没钱更可怕!
- 网页游戏分线到不分线
- 计算机职称考试网络模块试题,2012年职称计算机考试Internet应用模块的经典练习题...
- 全志Linux下载工具,全志 Allwinner A20 机顶盒刷入原生 Debian