微信小程序小白易入门基础教程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.mfbz.cn/a/451881.html

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

相关文章

＜2024最新＞ChatGPT逆向教程

＜2024最新＞ChatGPT逆向教程

前言 在使用本篇文章用到的项目以及工具时，需要对其有一定的了解，无法访问以及无法使用的问题作者不承担任何责任，可以自行想办法解决遇到的问题​。 文章若有不合适，有问题的地方，请私聊指出，谢谢~ 准备工具 一台至少 2 核 2G 内存的服务器，推荐是位于香港、新加坡或…
阅读更多...
微服务day01 -- SpringCloud01 -- (Eureka , Ribbon , Nacos)

微服务day01 -- SpringCloud01 -- (Eureka , Ribbon , Nacos)

介绍微服务 1.认识微服务(p1-p5) 随着互联网行业的发展&#xff0c;对服务的要求也越来越高&#xff0c;服务架构也从单体架构逐渐演变为现在流行的微服务架构。这些架构之间有怎样的差别呢&#xff1f; 1.0.学习目标 了解微服务架构的优缺点 1.1.单体架构 单体架构&#…
阅读更多...
vue.js项目评估流程图特效

vue.js项目评估流程图特效

vue.js项目评估流程图特效是一款带节点流程支持增加删除编辑的结构图代码。 下载地址 vue.js项目评估流程图特效
阅读更多...
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：RemoteWindow）

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

远程控制窗口组件&#xff0c;可以通过此组件控制应用窗口&#xff0c;提供启动退出过程中控件动画和应用窗口联动动画的能力。 说明&#xff1a; 该组件从API Version 9开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 该组件为系统接口。…
阅读更多...
jmeter发送请求参数如何使用变量

jmeter发送请求参数如何使用变量

问题描述 发送jmeter请求时&#xff0c;想设置请求参数为变量 解决方法
阅读更多...
css3实现3D立方体旋转特效源码

css3实现3D立方体旋转特效源码

源码介绍 CSS3自动旋转正方体3D特效是一款基于css3 keyframes属性制作的图片相册自动旋转立方体特效 效果展示 下载地址 css3实现3D立方体旋转特效代码
阅读更多...
微信小程序实现上下手势滑动切换

微信小程序实现上下手势滑动切换

效果图 思路 实现一个微信小程序的复合滚动页面&#xff0c;主要通过Swiper组件实现垂直方向的轮播功能&#xff0c;每个轮播项内部使用Scroll-View组件来展示可垂直滚动的长内容&#xff0c;如图片和文本。 代码 <!-- wxml --> <view class"swiper-container…
阅读更多...
为什么要分模块开发 以及maven的作用体现

为什么要分模块开发 以及maven的作用体现

为什么要分模块开发? 我们要知道分模块开发需要先针对模块进行设计再进行编码。 1.模块的创建 首先来看一下模块的创建 我们先理解一个思路我们一般项目是从本地仓库去找资源坐标,如果本地仓库都没有那是不可能找的到的 如果你idea中可以找到不爆红但是compile的时候会报错,除…
阅读更多...
JavaParser的快速介绍

JavaParser的快速介绍

开发的工作主要是写代码&#xff0c; 有考虑过使用代码写代码&#xff0c; 使用代码分析和改进代码吗&#xff1f; JavaParser 就可以帮你用来处理Java 代码的这些功能。 Java Parser 的介绍 Java Parser是一个用于解析和分析Java源代码的开源工具。它提供了一个API接口&…
阅读更多...
Web 常用的 扩展开发框架

Web 常用的 扩展开发框架

当谈到提升浏览器功能和用户体验时&#xff0c;浏览器扩展成了一股强大的力量&#xff0c;备受用户青睐。在众多的Web扩展开发框架中&#xff0c;WXT和Plasmo凭借其丰富的工具和特性&#xff0c;以及简化的开发流程&#xff0c;成为开发者们的首选。在本文中&#xff0c;我们将…
阅读更多...
Jenkins插件Parameterized Scheduler用法

Jenkins插件Parameterized Scheduler用法

Jenkins定时触发构建的同时设定参数。可以根据不同的定时构建器设置不同参数或环境变量的值。可以设置多个参数。并结合when控制stage流程的执行。结合when和triggeredBy区分定时构建的stage和手动执行的stage。 目录 什么是Parameterized Scheduler&#xff1f;如何配置实现呢…
阅读更多...
OGNL表达式

OGNL表达式

文章目录 一、简介二、快速入门三、详细使用3.1 基本数据类型3.2 对象类型3.3 List集合3.4 Set集合3.5 Map集合3.6 数组3.7 静态调用3.8 算术运算3.9 逻辑运算3.10 同时执行多个表达式3.11 位运算 Ognl使用总结 - 源链接在此 >> 一、简介 OGNL&#xff08;Object-Graph…
阅读更多...
【c 语言 】位操作符详解

【c 语言 】位操作符详解

&#x1f388;个人主页&#xff1a;豌豆射手^ &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;C语言 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进步&…
阅读更多...
【机器学习300问】33、决策树是如何进行特征选择的？

【机器学习300问】33、决策树是如何进行特征选择的？

还记得我在【机器学习300问】的第28问里谈到的&#xff0c;看决策树的定义不就是if-else语句吗怎么被称为机器学习模型&#xff1f;其中最重要的两点就是决策树算法要能够自己回答下面两问题&#xff1a; 该选哪些特征 特征选择该选哪个阈值 阈值确定 今天这篇文章承接上文&…
阅读更多...
1137. 第N个泰波那契数- 力扣

1137. 第N个泰波那契数- 力扣

1. 题目 泰波那契序列 Tn 定义如下&#xff1a; T0 0, T1 1, T2 1, 且在 n > 0 的条件下 Tn3 Tn Tn1 Tn2 给你整数 n&#xff0c;请返回第 n 个泰波那契数 Tn 的值。 2. 示例 3. 分析 1. 状态表示&#xff1a;dp[i]表示&#xff1a;第i个泰波那契数的值 2. 状态转移…
阅读更多...
python疑难杂症（10）---Python函数def的定义分类，包括内置函数、外置函数、匿名函数、闭包函数、生成器函数等

python疑难杂症（10）---Python函数def的定义分类，包括内置函数、外置函数、匿名函数、闭包函数、生成器函数等

本部分详细讲解Python函数的定义、常见的函数类型&#xff0c;尤其是特色函数包括内置函数、外置函数、匿名函数、闭包函数、生成器函数等以及用法。后续将对这类函数重点讲解使用方法。 函数定义&#xff1a; 函数是大多数编程语言使用的一个概念&#xff0c;函数是一段具有…
阅读更多...
下载BenchmarkSQL并使用BenchmarkSQL查看OceanBase 的执行计划

下载BenchmarkSQL并使用BenchmarkSQL查看OceanBase 的执行计划

下载BenchmarkSQL并使用BenchmarkSQL查看OceanBase 的执行计划 一、什么是BenchmarkSQL二、下载BenchmarkSQL三、使用BenchmarkSQL查看OceanBase 的执行计划 一、什么是BenchmarkSQL BenchmarkSQL是一个开源的数据库基准测试工具&#xff0c;可以用来评估数据库系统的性能&…
阅读更多...
基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的草莓成熟度检测系统详解（深度学习模型+UI界面+Python代码+训练数据集）

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的草莓成熟度检测系统详解（深度学习模型+UI界面+Python代码+训练数据集）

摘要&#xff1a;本研究介绍了一个使用深度学习技术对草莓成熟度进行检测的系统&#xff0c;它采用了最新的YOLOv8算法&#xff0c;以及YOLOv7、YOLOv6、YOLOv5等前版本的算法&#xff0c;并对它们进行了性能对比。该系统能够在不同媒介上——如图像、视频文件、实时视频流和批…
阅读更多...
28 批量归一化【李沐动手学深度学习v2课程笔记】（备注：这一节讲的很迷惑，很乱）

28 批量归一化【李沐动手学深度学习v2课程笔记】（备注：这一节讲的很迷惑，很乱）

目录 1.批量归一化 1.1训练神经网络时出现的挑战 1.2核心思想 1.3原理 2.批量规范化层 2.1 全连接层 2.2 卷积层 2.3 总结 3. 代码实现 4. 使用批量规范化层的LeNet 5. 简明实现 1.批量归一化 现在主流的卷积神经网络几乎都使用了批量归一化 批量归一化是一种流行且…
阅读更多...
Scrapy 爬虫框架

Scrapy 爬虫框架

网络爬虫框架scrapy &#xff08;配置型爬虫&#xff09; 什么是爬虫框架&#xff1f; 爬虫框架是实现爬虫功能的一个软件结构和功能组件集合爬虫框架是个半成品&#xff0c;帮助用户实现专业网络爬虫 scrapy框架结构("52"结构) spider: 解析downloader返回的响…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站