微信小程序
文章平均质量分 62
微信小程序实践
一颗不甘坠落的流星
前端专栏博主,目标是归纳前端所需要各种技术的使用,不是在补充、就是在重写博客的路上,一步步完善中。
展开
-
小程序 网络请求
文章目录网络请求的相关设置发起网络请求缓存请注意:小程序只支持https和wss(WebSocket,其具备ws协议与wss协议)协议的网络请求。但是允许开发者在开发环境下使用http请求,不过在最终上线时必须要修改为小程序支持的协议类型。文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html网络请求的相关设置虽然小程序只支持https和wss协议的网络请求。但是允原创 2021-06-10 17:30:51 · 616 阅读 · 0 评论 -
小程序 WXS模块
文章目录WXS模块案例分析WXS模块案例分析例如:定义wxs模块,将字符串转小写,并且截取子串目录结构:utils/wxs/common.wxs文件代码/* 1. wxs是一个微信脚本机制,weixin script 2. wxs后缀是“.wxs” 3. 一般存储于utils目录下 4. 可以封装函数,但不支持es6写法,写了就报错 5. 封装好的函数在使用的时候需要导出,因此不支持es6写法,所以不能使用es6的模块规范,得用commonJS模块化规范*/原创 2021-06-10 16:26:43 · 326 阅读 · 0 评论 -
小程序 导航方式
文章目录基于组件基于api小程序的路由章节并不是需要学习怎么定义路由,因为路由已经在app.json全局配置文件中声明好了。我们需要掌握的就是如何实现page的切换。基于组件基于组件式的导航方式其实就是之前的声明式导航文档地址:https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html组件:navigator该组件的属性比较多,需要注意下open-type,这里属性值稍微常用一点的就是switchTa原创 2021-06-10 15:50:16 · 225 阅读 · 0 评论 -
小程序 自定义组件
自定义组件文档地址:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/开发者可以将页面内的功能模块抽象成自定义组件(思想与vue和react一样),以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。步骤:1. 创建组件(页面)`main.wxml`,其实现的操作是可以被复用的2. 声明上一步创建好的页面为一个组原创 2021-06-08 20:24:20 · 195 阅读 · 2 评论 -
小程序 常用组件
文章目录组件介绍视图容器组件swiperscroll-view表单组件组件介绍框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之间。文档地址:https://developers.weixin.qq.com/miniprogram/dev/framework/view/component.html属性值类型:类型描述注解Boolean布尔值组件写上该属性,不管该原创 2021-06-08 20:07:12 · 275 阅读 · 0 评论 -
小程序 事件处理
文章目录事件绑定事件对象案例分析事件绑定文档地址https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#%E4%BA%8B%E4%BB%B6%E8%AF%A6%E8%A7%A3小程序的事件绑定需要注意以下几点:1. 小程序的事件绑定是通过标签的属性来完成的(与vue、react一致)2. 通过属性绑定事件其有两种写法 - 绑定冒泡事件(不会帮我们阻止冒泡)【主要】 - 语法:bind原创 2021-06-08 19:08:00 · 405 阅读 · 1 评论 -
小程序 生命周期
生命周期官方网址:https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html小程序数据互交就是通过不同的事件函数来完成的,了解生命周期函数,对于以后的数据交互是非常重要的。名称描述data页面的初始数据onLoad()页面加载时触发。一个页面只会调用一次,可以在onLoad的参数中获取打开当前页面路径中的参数。onShow()页面显示/切入前台时触发。一个页面可以触发N原创 2021-06-08 17:18:35 · 135 阅读 · 0 评论 -
小程序 tabBar菜单
文章目录tabBar 介绍tabBar 案例tabBar 介绍文档地址:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar1. tabBar 就是小程序底部的导航菜单,2. 小程序的 tabBar 使用比较简单,3. 只需要在全局配置文件`app.json`中加上下面的配置即可tabBar 案例参考代码:{ "tabBar": {原创 2021-06-07 20:56:20 · 404 阅读 · 0 评论 -
小程序 WXSS样式
WXSSWXSS是一套样式语言,用于描述WXML的组件样式(有点CSS描述HTML样式的感觉)为了适应广大的前端开发者,WXSS具有CSS大部分特性。同时为了更适合开发微信小程序,WXSS对CSS进行了扩充以及修改。例如:1. WXSS在底层支持新的尺寸单位rpx,可以根据屏幕宽度进行自适应,响应式尺寸单位2. 小程序中全屏尺寸数值是 : 750rpx与px的换算关系:设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)iPhone51原创 2021-06-07 20:25:05 · 435 阅读 · 0 评论 -
wxml语法:include包含
文章目录include 介绍include 案例include 介绍把模板定义到外部,然后多个页面间可以共用使用定义的模板WXML结构显示。(代码复用)import:将目标文件中所有的代码(除了template标签段、wxs标签段)统统在引入的位置直接用(直接使用)作用:可以将目标文件除了<template/> <wxs/>外的整个代码引入,相当于是拷贝到include位置。语法:<include src="目标文件的路径"/>include 案例原创 2021-06-07 20:15:15 · 653 阅读 · 0 评论 -
wxml语法:import导入
文章目录import 介绍import 案例import 介绍把模板定义到外部,然后多个页面间可以共用使用定义的模板WXML结构显示。(代码复用)import:可以把一些常用自定义函数,写到一个文件中,在用的时候可以导入进来,然后再去调用里面的特定的函数。(按需使用)作用:import可以在当前文件中使用目标文件定义的template(代码区块[标签],可以有多个)。语法:<import src="目标文件的路径"></import>注意事项:1. import原创 2021-06-07 19:58:35 · 932 阅读 · 0 评论 -
wxml语法:判断语法
文章目录准备工作判断语法准备工作在pages目录下新建一个List文件夹,在List文件夹上右击选择新建 Page,取名为list。目录结构:然后将app.json文件中pages数组里面的pages/List/list放在首位判断语法往pages/List/list.js里面添加一些数据data: { age:17 },在pages/List/list.wxml里面书写代码展示页面<!--miniprogram/pages/List/list.wx原创 2021-06-07 19:23:15 · 908 阅读 · 0 评论 -
wxml语法:循环语法
文章目录准备工作循环语法准备工作在pages目录下新建一个List文件夹,在List文件夹上右击选择新建 Page,取名为list。目录结构:然后将app.json文件中pages数组里面的pages/List/list放在首位循环语法往pages/List/list.js里面添加一些数据 data: { users:["张三","李四","王五","赵六"], obj:[ { id:1, name:"zhangsa原创 2021-06-07 19:08:10 · 2599 阅读 · 2 评论