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

news/2024/4/28 5:07:32

微信小程序

基本结构

在这里插入图片描述

页面配置

页面配置

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><viewhidden style="display:flex">123</view>
</view>

事件绑定

// pages/demo03/demo03.js
Page({/*** 页面的初始数据*/data: {num:0},handleinput(e){this.setData({num:e.detail.value})},handletap(e){//获取自定义属性operactionconst {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.cpky.cn/p/10764.html

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

相关文章

设计模式 -- 1：简单工厂模式

设计模式 -- 1：简单工厂模式

目录 代码记录代码部分 代码记录 设计模式的代码注意要运用到面向对象的思想 考虑到紧耦合和松耦合 把具体的操作类分开 不让其互相影响&#xff08;注意这点&#xff09; 下面是UML类图 代码部分 #include <iostream> #include <memory> // 引入智能指针的头文…
阅读更多...
Python哪个版本最稳定好用2023.10.19

Python哪个版本最稳定好用2023.10.19

环境&#xff1a; win10 专业版 Python 问题描述&#xff1a; python哪个版本最稳定好用 解决方案&#xff1a; 目前&#xff0c;Python 的最新版本是 3.11.0。然而&#xff0c;对于大多数用户来说&#xff0c;Python 3.8 和 3.9 是最稳定和好用的版本&#xff0c;因为它们…
阅读更多...
8：00面试，8：06就出来了，问的问题有点变态。。。

8：00面试，8：06就出来了，问的问题有点变态。。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到9月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40%…
阅读更多...
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：TextPicker）

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

滑动选择文本内容的组件。 说明&#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 TextPicker(options?: {range: string[] | string[][] | Resource | TextPickerRangeContent[] | Te…
阅读更多...
数据可视化实战(二)

数据可视化实战(二)

将每个城市在每个月份平均PM2.5绘制成折线图 import pandas as pd import matplotlib.pyplot as plt df pd.read_excel(./PM2.5.xlsx)display(df.head(10)) df.shape # (161630, 15)城市年份月份日期小时季节PM2.5露点湿度压强温度风向累计风速降水量累计降水量0北京2010112…
阅读更多...
酒店管理系统|基于Spring Boot框架+ Mysql+Java+ B/S结构的酒店管理系统设计与实现(可运行源码+数据库+设计文档)

酒店管理系统|基于Spring Boot框架+ Mysql+Java+ B/S结构的酒店管理系统设计与实现(可运行源码+数据库+设计文档)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含java&#xff0c;ssm&#xff0c;springboot的平台设计与实现项目系统开发资源&#xff08;可…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

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