微信小程序小白易入门基础教程1

微信小程序

基本结构

在这里插入图片描述

页面配置

页面配置

app.json 中的部分配置，也支持对单个页面进行配置，可以在页面对应的 .json 文件来对本页面的表现进行配置。

页面中配置项在当前页面会覆盖 app.json 中相同的配置项（样式相关的配置项属于 app.json 中的 window 属性，但这里不需要额外指定 window 字段），具体的取值和含义可参考全局配置文档中说明。

文件内容为一个 JSON 对象，有以下属性：

配置项

属性类型默认值描述最低版本
navigationBarBackgroundColorHexColor#000000导航栏背景颜色，如 #000000
navigationBarTextStylestringwhite导航栏标题颜色，仅支持 black / white
navigationBarTitleTextstring导航栏标题文字内容
navigationStylestringdefault导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。iOS/Android 微信客户端 7.0.0，Windows 微信客户端不支持
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStylestringdark下拉 loading 的样式，仅支持 dark / light
backgroundColorTopstring#ffffff顶部窗口的背景色，仅 iOS 支持微信客户端 6.5.16
backgroundColorBottomstring#ffffff底部窗口的背景色，仅 iOS 支持微信客户端 6.5.16
enablePullDownRefreshbooleanfalse是否开启当前页面下拉刷新。 详见 Page.onPullDownRefresh
onReachBottomDistancenumber50页面上拉触底事件触发时距页面底部距离，单位为px。 详见 Page.onReachBottom
pageOrientationstringportrait屏幕旋转设置，支持 auto / portrait / landscape 详见 响应显示区域变化2.4.0 (auto) / 2.5.0 (landscape)
disableScrollbooleanfalse设置为 true 则页面整体不能上下滚动。 只在页面配置中有效，无法在 app.json 中设置
usingComponentsObject否页面自定义组件配置1.6.3
initialRenderingCachestring页面初始渲染缓存配置，支持 static / dynamic2.11.1
stylestringdefault启用新版的组件样式2.10.2
singlePageObject否单页模式相关配置2.12.0
restartStrategystringhomePage重新启动策略配置2.8.0
  • 注：并不是所有 app.json 中的配置都可以在页面覆盖或单独指定，仅限于本文档包含的选项。
  • 注：iOS/Android 客户端 7.0.0 以下版本，navigationStyle 只在 app.json 中生效。

配置示例

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

数据绑定

<!--字符串-->

<view>{{msg}}</view>

<!--数字类型-->

<view>{{num}}</view>

<!--bool类型-->

<view> 是否{{isGirl}}</view>

<!--object类型-->

<view> {{person.age}}</view>

<view> {{person.height}}</view>

<view> {{person.name}}</view>

<view data-="num">自定义属性</view>



<view>

<checkbox checked="{{ischecked}}"></checkbox>

</view>

js

 data: {
     msg:"hello ",
     num:"1000",
     isGirl:false,
     person:{
       age:18,
       height:1.75,
       weight:200,
       name:"wagn"
     }
   },
     ischecked:false

运算表达式

列表循环和对象

列表循环
wx:for=“{{数组或者对象}}”
wx: for item=" 循环项的名称”wx: for - index=" 循环项的索引”

1 wx:for=“{{数组或者对象}}” Wx: for- item=“循环项的名称” wX: for- index=”循环项的索引”
2 wx:key=“唯一 的值"用来提高列表渲染的性能
1 wx:key 绑定一个普通的字符串的时候那么这个字符串名称肯定是循环数组中的对象的唯一 属性
2 wx:key =”*this" 就表示你的数组是一个普通的数组 *this 表示是循环项
[1,2,3,44, 5]
[“1”,“222”，“adfdf”]
3当出现数组的嵌套循环的时候尤其要注意 以下绑定的名称不要重名
wx:for - item=" item" Wx: for- index=" index"
4默认情况下我们不写
wX: for- item=" item" wx: for- index=" index"
小程序也会把循环项的名称和索引的名称item 和index
只有一层循环的话

( wx:for-item=“item” wx:for-index=“index”) 可以省略

 <view wx:for="{{list}}"
   wx:for-item="item" 
   wx:for-index="index"
   wx:key="id"> 
索引{{index}}
数值{{item.name}}
</view>

对象循环

1 wx:for=“{{对象}}” wx:for- item="对象的值” wx: for- index=“对象的属性”
2循环对象的时候最好把item和index的名称都修改一下
wx: for- item=“value”
Wx: for- index=“key”

代码

<view wx:for="{{person}}" wx:for-item="value" wx:for-index="key">
属性{{key}}
值{{value}}
</view>



 person:{
       age:18,
       height:1.75,
       weight:200,
       name:"wagn"
     },

条件渲染

11条件渲染
1 wx:if=“{{true/false}}”
2 if
，else，if else
wx:if
wx:elif
wx:else

<view wx:if="{{true}}">显示</view>
<view wx:else="{{false}}">隐藏</view>
<view wx:elif>no</view>
hidden

什么场景下用哪个
1当标签不是频繁的切换显示优先使用wx:if
直接把标签从页面结构给移除掉
2当标签频繁的切换显示的时候优先使用_ hidden
通过添加样式的方式来切换显示

<view hidden="{{true}}">134</view>


<view
 hidden style="display:flex">123</view>
</view>

事件绑定

// pages/demo03/demo03.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    num:0
  },
    handleinput(e){
      this.setData({
        num:e.detail.value
      })
    },
    handletap(e){
      //获取自定义属性operaction
     const {operaction} = e.currentTarget.dataset;
     console.log(operaction);
     this.setData({
      num:this.data.num + operaction
    })
    }
  

})

小程序事件绑定

需要给input标签绑定input事件
绑定关键字bindinput
2如何获取输入框的值
通过事件源对象来获取
e. detail. value
3把输入框的值赋值到data当中
不能直接
1 this. data . num=e . detail. value
2 this . num=e . detail . value
正确的写法
this. setData({
num:e . detail. value
})
4需要加入一个点击事件
1 bindtap
2无法在小程序当中的事件中直接传参
3通过自定义属性的方式来传递参数
4事件源中获取自定义属性

rpx

尺寸单位

拿以上的需求去实现不同宽度的页面适配
page px = 750 rpx
1px=750rpx/page
100px=750rpx*100/page
假设
page
375px
利用一个属性calc属性
CSS和wxss 都支持一个属性
750和rpx中间不要留空格
运算符的两边也不要留空格

view{
  /* width: 200rpx; */
  height: 200rpx;
  font-size: 40rex;
  background-color: #454659;
  width:calc(750rpx * 100 / 375px);
}

样式导⼊

wxss中直接就⽀持，样式导⼊功能。

也可以和 less中的导⼊混⽤。

使⽤ @import

语句可以导⼊外联样式表，只⽀持相对路径

⼩程序中使⽤less

原⽣⼩程序不⽀持 less

，其他基于⼩程序的框架⼤体都⽀持，如 wepy mpvue ， taro

等。

但是仅仅因为⼀个less功能，⽽去引⼊⼀个框架，肯定是不可取的。因此可以⽤以下⽅式来实现

\1. 编辑器是 vscode

\2. 安装插件 easy less

\3. 在vs code的设置中加⼊如下，配置
在这里插入图片描述

\4. 在要编写样式的地⽅，新建 less

⽂件，如 index.less

,然后正常编辑即可。

常见组件

布局组件

view,text,rich,text,button,image,navigator,icon,swiper,radio,checkbox

view

代替 原来的 div 标签

swiper

默认宽度 100% ⾼度 150px

在这里插入图片描述

<swiper autoplay interval="1000" circular indicator-dots="ture" indicator-active-color="pink">

<swiper-item><image mode="widthFix" src="./img/lun.jpg/"/></swiper-item>
<swiper-item><image mode="widthFix" src="./img/lun-1.png/"/></swiper-item>
<swiper-item><image mode="widthFix" src="./img/lun-2.jpg/"/></swiper-item>
</swiper>

navigator

导航组件

默认换行

在这里插入图片描述

open-type 有效值

navigate 有返回

redirect无返回

在这里插入图片描述

rich-text 富文本标签

类似v-html

nodes属性
使用
demo07.wxml
1.标签字符串
<rich-text nodes="<img
src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.p
ng" alt="">"></rich-text>
2.对象数组
<rich-text nodes="{{nodes}}"></rich-text>


demo07.js
data: {
       nodes: [{
           name: 'div',
           attrs: {
             class: 'div_class',
             style: 'line-height: 60px; color: red;'
          },
           children: [{
             type: 'text',
             text: 'Hello&nbsp;World!'
          }]
        }]
  
}

icon

<view class="group">
  <block wx:for="{{iconSize}}">
    <icon type="success" size="{{item}}"/>
  </block>
</view> <view class="group">
  <block wx:for="{{iconType}}">
    <icon type="{{item}}" size="40"/>
  </block>
</view> <view class="group">
  <block wx:for="{{iconColor}}">
    <icon type="success" size="40" color="{{item}}"/>
  </block>
</view>

data: {
       iconSize: [20, 30, 40, 50, 60, 70],
       iconType: [
         'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel',
   'download', 'search', 'clear'
      ],
       iconColor: [
         'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
      ],
    },

lass=“group”>

data: {
iconSize: [20, 30, 40, 50, 60, 70],
iconType: [
‘success’, ‘success_no_circle’, ‘info’, ‘warn’, ‘waiting’, ‘cancel’,
‘download’, ‘search’, ‘clear’
],
iconColor: [
‘red’, ‘orange’, ‘yellow’, ‘green’, ‘rgb(0,255,255)’, ‘blue’, ‘purple’
],
},

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.kler.cn/a/274211.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【SVG】前端-不依靠第三方包怎么画连线???

【SVG】前端-不依靠第三方包怎么画连线???

如何用SVG实现连线功能 在Web开发中&#xff0c;我们经常会遇到需要在页面上绘制图形或者实现一些图形交互的场景。SVG&#xff08;Scalable Vector Graphics&#xff09;作为一种用于描述二维图形的XML标记语言&#xff0c;在这方面提供了极大的便利。本文将以一个具体的例子…
阅读更多...
装X神器，装X图片生成器，高富帅模拟器

装X神器，装X图片生成器，高富帅模拟器

先展示两张效果 基金装X图 短信存款图 神器功能展示 总共有12大类可供用户选择 还有一些美感的&#xff1a; 总结 总之种类非常多&#xff0c;有了这个神器你懂的&#xff5e; 关注下方公众号&#xff0c;回复【zzsq】即可获取。
阅读更多...
论文阅读——MoCo

论文阅读——MoCo

Momentum Contrast for Unsupervised Visual Representation Learning 动量在数学上理解为加权移动平均&#xff1a; yt-1是上一时刻输出&#xff0c;xt是当前时刻输入&#xff0c;m是动量&#xff0c;不想让当前时刻输出只依赖于当前时刻的输入&#xff0c;m很大时&#xff0…
阅读更多...
014 Linux_同步

014 Linux_同步

​&#x1f308;个人主页&#xff1a;Fan_558 &#x1f525; 系列专栏&#xff1a;Linux &#x1f339;关注我&#x1f4aa;&#x1f3fb;带你学更多操作系统知识 文章目录 前言一、死锁&#xff08;1&#xff09;死锁概念 二、同步&#xff08;1&#xff09;同步概念&#xff…
阅读更多...
Linux下使用ntpdate进行时间同步

Linux下使用ntpdate进行时间同步

1.简介 ntpdate是Linux下用于从NTP服务器同步时间的命令行工具。 2.安装 大多数Linux发行版已预装ntpdate。未安装的可使用以下命令&#xff1a; # Ubuntu/Debian sudo apt-get install ntpdate # CentOS/Fedora/RHEL sudo yum install ntpdate 3.手工同步网络时间 执行以下命…
阅读更多...
8.python中的元组

8.python中的元组

8.python中的元组 虽然说元组用的不是很多&#xff0c;但是还是讲一下。元组其实可以看为是一个列表&#xff0c;不可变的列表。操作和列表都差不多。 元组&#xff08;tuple&#xff09;是Python中的一种基本数据结构类型&#xff0c;它是不可变的序列&#xff0c;意味着一旦…
阅读更多...
Java13_反转字符串中的单词 III(方法二String转换成字符数组）

Java13_反转字符串中的单词 III(方法二String转换成字符数组）

反转字符串中的单词 III 给定一个字符串 s &#xff0c;你需要反转字符串中每个单词的字符顺序&#xff0c;同时仍保留空格和单词的初始顺序。 示例 1&#xff1a; 输入&#xff1a;s "Lets take LeetCode contest" 输出&#xff1a;"steL ekat edoCteeL tset…
阅读更多...
Java的图书管理系统，确实有两把斧子 ！ ！ ！

Java的图书管理系统，确实有两把斧子 ！ ！ ！

本篇会加入个人的所谓‘鱼式疯言’ ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. &#x1f92d;&#x1f92d;&#x1f92d;可能说的不是那么严谨.但小编初心是能让更多人…
阅读更多...
网络——入门基础

网络——入门基础

目录 协议 网络协议 OSI七层模型 网络传输基本流程 网络传输流程图 局域网通信 数据包的封装和解包 广域网通信 网络地址管理 IP地址 MAC地址 协议 关于什么是局域网&#xff0c;什么是广域网&#xff0c;我这里就不过多赘述了&#xff0c;我们直接来谈一下什么…
阅读更多...
HarmonyOS NEXT应用开发—投票动效实现案例

HarmonyOS NEXT应用开发—投票动效实现案例

介绍 本示例介绍使用绘制组件中的Polygon组件配合使用显式动画以及borderRadius实现投票pk组件。 效果预览图 使用说明 加载完成后会有一个胶囊块被切割成两个等大的图形来作为投票的两个选项&#xff0c;中间由PK两字分隔开点击左边选项&#xff0c;两个图形会随着选择人数…
阅读更多...
HarmonyOS NEXT应用开发之多文件下载监听案例

HarmonyOS NEXT应用开发之多文件下载监听案例

介绍 多文件下载监听在应用开发中是一个非常常见的需求。本示例将介绍如何使用request上传下载模块实现多文件下载监听&#xff0c;如监听每个文件下载任务的进度&#xff0c;任务暂停&#xff0c;下载完成等下载情况。每个应用最多支持创建10个未完成的任务&#xff0c;相关规…
阅读更多...
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Toggle）

鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Toggle）

组件提供勾选框样式、状态按钮样式及开关样式。 说明&#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 仅当ToggleType为Button时可包含子组件。 接口 Toggle(options: { type: ToggleType, is…
阅读更多...
sparksql简介

sparksql简介

什么是sparksql sparksql是一个用来处理结构话数据的spark模块&#xff0c;它允许开发者便捷地使用sql语句的方式来处理数据&#xff1b;它是用来处理大规模结构化数据的分布式计算引擎&#xff0c;其他分布式计算引擎比较火的还有hive&#xff0c;map-reduce方式。 sparksql…
阅读更多...
mysql查询条件包含IS NULL、IS NOT NULL、!=、like %* 、like %*%,不能使用索引查询，只能使用全表扫描，是真的吗？？？

mysql查询条件包含IS NULL、IS NOT NULL、!=、like %* 、like %*%,不能使用索引查询，只能使用全表扫描，是真的吗？？？

不知道是啥原因也不知道啥时候, 江湖上流传着这么一个说法 mysql查询条件包含IS NULL、IS NOT NULL、!、like %* 、like %*%,不能使用索引查询&#xff0c;只能使用全表扫描。 刚入行时我也是这么认为的&#xff0c;还奉为真理&#xff01; 但是时间工作中你会发现还是走索引…
阅读更多...
bitset详解

bitset详解

本文旨在讲解位图的原理&#xff0c;以及位图有什么作用&#xff0c;如何实现位图。希望读完本篇文章能对小伙伴们有一定的收获&#xff01;上干货&#xff01; 什么是位图 位图就是bitmap的缩写&#xff0c;所谓bitmap&#xff0c;就是用每一位来存放某种状态&#xff0c;适用…
阅读更多...
代理IP品质对Tik Tok代理的重要性

代理IP品质对Tik Tok代理的重要性

随着Tik Tok的迅速崛起&#xff0c;越来越多的人开始关注如何透过Tik Tok进行行销和推广。其中&#xff0c;使用Tik Tok代理程式是常见的方法。 然而&#xff0c;在选择和使用代理时&#xff0c;IP品质是一个不可忽视的因素。本文将探讨IP品质对Tik Tok代理的重要性&#xff0…
阅读更多...
架起桥梁，畅享流通：如何使用私有Registry实现镜像跨源同步与管理

架起桥梁，畅享流通：如何使用私有Registry实现镜像跨源同步与管理

在Docker容器化世界中&#xff0c;镜像作为构建和运行应用的基础单元&#xff0c;其管理与分发对于企业级应用至关重要。私有Registry作为存储和管理Docker镜像的中心仓库&#xff0c;不仅可以保障企业数据的安全性&#xff0c;更能通过镜像同步功能实现跨源镜像的统一管理和高…
阅读更多...
R语言中的常用基础绘图函数 直方图，箱线图，条形图，散点图

R语言中的常用基础绘图函数 直方图，箱线图，条形图，散点图

目录 R语言中的绘图参数 绘图函数 1.plot函数绘制散点图 2.hist函数绘制直方图 如何修饰直方图? 如何在直方图上标注各组频数&#xff1f; 使用text函数把某些信息标注在直方图上 如何在直方图上添加概率密度曲线&#xff1f; 3.boxplot函数绘制箱线图 4.barplot函数…
阅读更多...
代码随想录算法训练营 DAY 14 | 二叉树的递归遍历和迭代遍历

代码随想录算法训练营 DAY 14 | 二叉树的递归遍历和迭代遍历

二叉树基础 种类 满二叉树&#xff1a;深度为k&#xff0c;有2^k-1个节点的二叉树 完全二叉树&#xff1a;除了最底层可能没满&#xff0c;且都在靠左侧 优先级队列其实是一个堆&#xff0c;堆就是一棵完全二叉树&#xff0c;同时保证父子节点的顺序关系。 二叉搜索树&…
阅读更多...
中间件-消息队列

中间件-消息队列

消息队列基础知识 什么是消息队列 本处提到的消息队列是指各个服务以及系统组件/模块之间的通信&#xff0c;属于一种中间件。参与消息传递的双方称为生产者和消费者&#xff0c;生产者负责发送消息&#xff0c;消费者负责处理消息。 消息队列作用 通过异步处理&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023