首页 > 编程语言 >5 分钟带你小程序入门 [实战总结分享]

5 分钟带你小程序入门 [实战总结分享]

时间:2023-04-10 09:48:04浏览次数:33  
标签:实战 入门 程序 JS 语法 分享 选择器 CSS 属性

wallhaven-kx7m96.jpg

微信小程序常常用 4 种文件类型

JS 文件

JS 在小程序中用于编写页面逻辑和交互效果,可调用 API 接口完成数据请求和处理,也可以使用第三方库和框架。

  1. 模块化编程:小程序中JS文件可以使用ES6的模块化语法,通过export和import来导出和导入模块。
  2. 引用其他JS文件:小程序中的JS文件可以通过require来引入其他的JS文件,如utils、model等。
  3. 事件处理:小程序中的事件处理非常重要,需要注意事件的绑定和触发,以及事件参数的传递和处理。
  4. 数据绑定和更新:小程序中的数据绑定和更新是自动的,但也需要注意一些细节,如数据类型的转换和更新时机等。
  5. API调用:小程序提供了很多API供开发者使用,需要注意选择正确的API并正确调用。
  6. 错误处理:小程序中JS出错会导致页面崩溃,需要使用try-catch来进行错误处理,避免影响用户体验。

json 文件

JSON 在小程序中用于配置页面属性和数据源。它可以定义页面的背景色、导航栏字体颜色、数据源等。

WXML

WXML 是一种基于 XML 语法的标记语言,用于编写小程序页面结构。它支持数据绑定、条件、循环语句等语法,并可与 JS 模块交互。

WXSS

WXSS 是一种基于 CSS 语法的样式表语言,用于定义小程序页面的样式。它支持嵌套、变量、继承、全局样式等特性。

写 wxss 时,小程序不支持哪些写法

微信小程序的 WXSS 是一种针对小程序的特殊样式语言,和传统网页CSS有些不同,虽然语法和CSS相似,但在实际使用中还是有一些差别。
下面是不支持的CSS属性和选择器:

CSS属性:

  1. 通用选择器(*)
  2. 边框圆角属性(border-radius)
  3. 文字阴影属性(text-shadow)
  4. 图片滤镜属性(filter)
  5. 高级定位属性(z-index)
  6. grayscale,sepia,saturate,hue-rotate,invert,opacity

CSS选择器:

  1. ID选择器(#id)
  2. 兄弟选择器(+ 和 ~)
  3. 属性选择器中用多个属性一起选择的方式,([attr="value"][attr2="value2"])
  4. 伪元素选择器(::before和::after)
  5. 可为空元素选择器(:empty)

项目配置

调试工具

语法回顾

wxml 语法

定义模块

直接创建 .wxs 文件 。
每个 wxs 模块均有一个内置的 module 对象。

  • exports: 通过该属性,可以对外共享本模块的私有变量与函数。

路由API 整理

持续更新中.......

标签:实战,入门,程序,JS,语法,分享,选择器,CSS,属性
From: https://www.cnblogs.com/HaiJun-Aion/p/17301800.html

相关文章

  • 全网最详细中英文ChatGPT-GPT-4示例文档-文章大纲智能生成器从0到1快速入门——官网推
    目录Introduce简介setting设置Prompt提示Sampleresponse回复样本APIrequest接口请求python接口请求示例node.js接口请求示例curl命令示例json格式示例其它资料下载ChatGPT是目前最先进的AI聊天机器人,它能够理解图片和文字,生成流畅和有趣的回答。如果你想跟上AI时代的潮流......
  • ST入门笔记1
    ST按钮点动控制灯的应用//梯形图内嵌ST框插入(Ctrl+B)//ctrl+鼠标滚轮可以放大缩小画面//键盘调到大写//:=1;END_IF;自动缩进功能//IFM0=1THEN Y0:=1;END_IF;当M0等于1时,Y0永久置1//新建触摸屏//位点动按下为1松开为0//F4编译调试模拟//启动触摸屏模拟器启动//没有安装GX......
  • 庄懂的技术美术入门01笔记
    前言:unity的全英文对我真的是劝退XD这算是真正意义上的第一篇博客,是以笔记的形式,主要是怕自己忘了,或许之后不定时还会对笔记内容进行总结再水一篇1.一般简单的渲染过程模型——输入结构——顶点shader——输出结构——像素shader——渲染结果①模型——输入结构将原模型转化......
  • Semantic Kernel 入门系列:
    理解了LLM的作用之后,如何才能构造出与LLM相结合的应用程序呢?首先我们需要把LLMAI的能力和原生代码的能力区分开来,在SemanticKernel(以下简称SK),LLM的能力称为semanticfunction,代码的能力称为nativefunction,两者平等的称之为function(功能),一组功能构成一个技能(skill)。SK的基......
  • Rust编程语言入门之cargo、crates.io
    cargo、crates.io本章内容通过releaseprofile来自定义构建在https://crates.io/上发布库通过workspaces组织大工程从https://crates.io/来安装库使用自定义命令扩展cargo一、通过releaseprofile来自定义构建releaseprofile(发布配置)releaseprofile:是预......
  • 第136篇:Three.js基础入门动画API:setInterval 与 requestAnimationFrame的区别
    好家伙,书接上文 functionanimate(){//请求-动画-框架requestAnimationFrame(animate);//改变正方体在场景中的位置,让正方体动起来cube.rotation.x+=0.01;cube.rotation.y+=0.01;renderer.render(......
  • Rust入门, 猜字游戏!
    userand::Rng;//随机数usestd::cmp::Ordering;//枚举对比cmpusestd::io;//io输入输出获取fnmain(){println!("这是一个猜字游戏!");//rand::thread_rng()是获取一个本地线程作为随机数函数使用,gen_range()是获取一个范围内的随机数生成letr......
  • [MAUI 项目实战] 手势控制音乐播放器(一): 概述与架构
    这是一篇系列博文。请关注我,学习更多.NETMAUI开发知识![MAUI项目实战]手势控制音乐播放器(一):概述与架构[MAUI项目实战]手势控制音乐播放器(二):手势交互[MAUI项目实战]手势控制音乐播放器(三):动画[MAUI项目实战]手势控制音乐播放器(四):圆形进度条在之前的博文中提到这个......
  • 14.6二叉树的层序遍历实战
    function.h////Createdby93757on2023/3/21.//#ifndefINC_1_TREE_FUNCTION_H#defineINC_1_TREE_FUNCTION_H#include<stdio.h>#include<stdlib.h>typedefcharBiElemType;typedefstructBiTNode{BiElemTypec;//c就是书籍上的datastru......
  • 分享10个高级sql写法
    本文主要介绍博主在以往开发过程中,对于不同业务所对应的sql写法进行归纳总结而来。进而分享给大家。本文所讲述sql语法都是基于MySql8.0+博主github地址:http://github.com/wayn111 欢迎大家关注,点个star一、ORDERBYFIELD()自定义排序逻辑MySql中的排序ORDERBY......