【精讲】微信小程序 基础内容（组件）入门
目录
第一部分：滚动菜单内容
第二部分：轮播图内容
第三部分：常用基础组件
第四部分：数据操作
第一部分：滚动菜单内容
wxml内容：
<!-- scroll-y是纵向滚动 -->
<!-- scroll-y是横向滚动 -->
<!-- <scroll-view class="container1" scroll-y> -->
<!-- view相当于HTML中的div -->
<!-- <view>A</view>
<view>B</view>
<view>C</view>
</scroll-view> -->
wxss内容：
/* 滚动部分 */
/* .container1 view{
width:100px;
height:100px;
text-align:center;
line-height: 100px;
}
.container1 view:nth-of-type(1){
background-color:rgb(8, 250, 28);
}
.container1 view:nth-of-type(2){
background-color: deeppink;
}
.container1 view:nth-of-type(3){
background-color: lightcoral;
}
.container1{
/* display: flex;
justify-content:space-around; */
/* 实现滚动效果必须加宽高 */
/* width:100px;
height:200px;
border:1px solid red;
} */
第二部分：轮播图内容
wxml内容：
<!-- 轮播图 indicator-color="white"改变小圆点未被激活时是白色 默认是黑色样式-->
<swiper class="swiper-container1" indicator-dots indicator-color="white">
<!-- 第一部分 -->
<swiper-item><view class="item">A</view></swiper-item>
<!-- 第二部分 -->
<swiper-item><view class="item">B</view></swiper-item>
<!-- 第三部分 -->
<swiper-item><view class="item">C</view></swiper-item>
<!-- 第四部分 -->
<swiper-item><view class="item">D</view></swiper-item>
</swiper>
wxss内容：
/* 轮播图部分 */
.swiper-container1{
height:150px;
}
.item{
height:100%;
line-height:150px;
text-align: center;
}
swiper-item:nth-child(1) .item{
background-color: red;
}
swiper-item:nth-child(2) .item{
background-color:lightseagreen;
}
swiper-item:nth-child(3) .item{
background-color: lightsalmon;
}
swiper-item:nth-child(4) .item{
background-color: limegreen;
}
常用的样式表（主要用于wxml中swiper组件中控制圆点等样式的）：
样式实现图例：
该部分是控制是否自动轮播且设置时间等，在上表中的数据全部写入swiper组件中
第三部分：常用基础组件
若不添加在text中，是不能进行长按选中
<!-- 常用的基础内容组件text和rich-text的用法 -->
<view>
手机号支持长按选中效果:
<!-- 默认长按是没有效果的 此次长按需要在真机上进行 -->
<text selectable >134124723985</text>
</view>
常用的rich-text 组件 在内部添加nodes="添加标签属性" 不添加无效 注：外面的标签属性有双引号，内部必须使用单引号
其它组件内容：
按钮的不同用法：
image的使用多种常用的模式：
写法如下：
小程序Api的3大分类：
第四部分：数据操作
条件渲染：
wx:if与wx:hidden的区别：
wx:if在激活时就会显示，否则就会被移除，若不经常使用，建议使用wx:if语句，此外在多个语句中也可以使用wx:if 因为后面还有wx:elif及wx:else
wx:hidden在激活时就会隐藏，否则就会显示，若经常使用，建议使用wx:hidden语句
列表渲染：
wx:for语法格式：wx:for="{{array对象名}}" wx:key="index"
具体使用：
<view wx:for="{{array}}" wx:key="index">
姓名:{{item.username}},年龄:{{index}}
</view>
根据上述的内容：下面是详细的操作示例：
index.js页面：
// 获取应用实例
const app = getApp()
Page({
data: {
count:0,
msg:'你好',
type:1 ,
flag:true,
arr1:['苹果','华为','小米'],
arrlist:[
{id:1,username:'小红'},
{id:2,username:'小明'},
{id:3,username:'小李'},
]
},
inputHandler(e){
// console.log(e.detail.value)
this.setData({
msg:e.detail.value
})
},
})
补充：block的使用，block在页面中只会显示其内容，不会将标签暴露出来，也就是说，block只有包裹的作用，没有其它的用法。而使用view内外嵌套，那么将会内外的view标签均都会进行暴露出来，从而出现不必要的节点。
关于rps的实现原理：
px与rps的换算：
在开发的过程中，建议使用iPhone6的标准去换算，因为是整数，1:2的比例
关于样式的公共部分导入及使用：
样式的权重比较：
鼠标放入样式上即可显示出权重数据；
引入方式：@import '/pages/common/commstyle.wxss';
关于控制小程序页面的配置项是：
针对以上配置项，做出如下的操作示例：
在正常情况下，"onReachBottomDistance"：50是不改变的，注：后面的px不用加，默认情况下已经加了。
关于tabBar的使用及注意事项：
tabBar的组成部分：
以上是6个组成部分的属性
tabBar在全局组件中使用App.json：
// pagePath是跳转的地址 text是名字
在App文件控制下面的点击跳转：
如图所示：
第一步：
第二步：
第三步：
上述完善后，保存即可，默认选中的是首页，当你点击其它的页面时，其它页面内容上的点击按钮会根据你的给定的图标颜色进行改变。
注：申明的页面只能往数组的开头放，不能往后放，同时也不能在pages中放在末尾部分，必须在前面，否则会显示不了。
tabBar中必须要加list数组，随后以对象的形式将具体每个页面的内容创建在对象中。
第五部分：页面配置
首先，页面配置与全局配置，页面配置的级别高于全局配置，所以当页面与全局的配置冲突时，以页面的为主，“就近原则”，下方是页面配置，具体使用操作与全局配置一样，可见上方全局配置部分。
以下是服务器域名的配置步骤及事项：
在小程序中修改或配置域名时，规定前面的域名地址必须是https:// 否则就会报错/无法保存等现象
正确模板：
请求方式(get/post)：
在页面中给定一个点击按钮，添加点击事件，这里的点击事件是“bindtap”
<button bindtap="btnlist" type="primary">点击按钮</button>
【精讲】微信小程序 基础内容（组件）入门相关推荐
- 微信小程序--基础内容（详解）（一）
一.常用标签 1.view 标签 view 标签是一个块级元素,类似于 div(小程序里面没有div标签),里面可以放任何内容或者插值表达式,如下所示: <view>这是view标签< ...
- 视频教程-2020最新微信小程序基础+实战精讲视频-微信开发
2020最新微信小程序基础+实战精讲视频 负责过多个软件项目的研发.设计和管理工作,拥有项目管理师认证.项目监理师中级认证.出版过的图书有<微信小程序开发图解案例教程><Axure ...
- 微信小程序基础（全家福01）
微信小程序基础 目标 能够知道如何创建小程序项目 能够清除小程序项目的基本组成结构 能够知道小程序页面有几个部分组成 能够知道小程序中常见的组件如何使用 能够知道小程序如何进行协同开发和发布 讲解目录 ...
- 关于微信小程序相关内容
微信小程序相关内容 1.简单描述下微信⼩程序的相关⽂件类型 首先,你在app.json里面的pages下面配置一个地址,它就会自动生成一个文件夹,写在最前面的就是默认的主页面. 自动生成的文件夹里面主 ...
- 微信小程序基础学习笔记Day01
学习目标:微信小程序基础Day01 今日目标: 能够知道如何创建小程序项目 能够清楚小程序项目的基本组成结构 能够知道小程序页面由几部分组成 能够知道小程序中常见的组件如何使用 能够知道小程序如何进行 ...
- 《微信小程序-基础篇》初识微信小程序
大家好,好久不见了,前段时间各种原因分享不稳定,后面一段时间内参与了主站的原力计划,请麻烦各位支持一下,万分感谢- 本系列将从零开始介绍微信小程序的开发,介绍完基础以后会实际同步开发一个微信小程序的项 ...
- 微信小程序基础之开源项目库汇总
awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合.我们会定期同步OpenDigg上的项目到这里,也欢迎各位提交项目给我们. (链接:ht ...
- 微信小程序 基础语法
微信小程序 基础语法 官网:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/ .wxml文件中 列表渲染 <view ...
- 微信小程序基础学习笔记Day02
学习目标:微信小程序基础Day02 今日目标: 能够使用 WXML 模板语法渲染页面结构 能够使用 WXSS 样式美化页面结构 能够使用 app.json 对小程序进行全局性配置 能够使用 page. ...
最新文章
- PHP实时生成并下载超大数据量的EXCEL文件
- “基础数学没用”，百年名校要裁撤数学系补贴AI研究，4000多学者联合抗议
- [2778]小明的花费预算 (二分查找)SDUT
- iOS 之 二维码生成与扫描（LBXScan）
- QT乱码总结3.UNICODE有无BOM
- 为myeclipse分配更大的内存
- linux下xargs命令用法详解
- httpclient的post请求超时
- H5 新特性之 fileReader 实现本地图片视频资源的预览
- 上海交通大学计算机应用作业,上海交通大学继续教育学院计算机应用基础（二)第六次作业计算机安全多媒体_1...
- 35岁是继续做测试，还是回家送外卖？
- 计算机考专硕还是学硕好呢,2021计算机考研选学硕还是专硕？
- ios 纯代码怎么适配ipad_iOS开发中iPhone和iPad的布局适配(工具篇)
- 一个js写的爱心表白神器
- 江苏五大姓氏世家，第一王，第二张，看看你是不是来自名门望族
- 微信 8.0.22 内测版：6 大更新第 1 个最实用
- 用Java语句判断一个数字是不是7的倍数
- 表白套路计算机公式,高级表白密码我喜欢你公式 套路喜欢的人
- jQuery获取(设置)自定义属性值
- gateway+vue实现防接口重放、防篡改