ca88编程微信小程序 基础零部件与导航组件详细介

作者:ca88编程

基础零部件

  • iconLogo组件
  • rich-text 富文本组件
  • text 文本组件
  • progress 进程条组件
.show-text{
 font-size: 10pt;
 margin-left: 20rpx;
 font-family: 'Times New Roman', Times, serif;
 font-weight: bold;
}
.text-view{
 padding: 10rpx;
}
button{
 margin: 10rpx;
}
1.是什么?

小程序中的"进程条"

    {

icon图标组件

  • 官方介绍

ca88编程 1

  • 示范用例
<!--icon.wxml--><view ><icon type='success' color='red' size='55'></icon><icon type='success_no_circle' size='55'></icon><icon type='info' size='55'></icon><icon type='warn' size='55'></icon><icon type='waiting' size='55'></icon><icon type='cancel' size='55'></icon><icon type='download' size='55'></icon><icon type='search' size='55'></icon><icon type='clear' size='55'></icon></view>

ca88编程 2

 1.基础零部件   

2.属性
属性名 类型 默认值 说明
selectable Boolean false 文本是否可选,测试基本没什么用处
space String false 显示连续空格(ensp中文空格一半,emsp中文空格,nbsp 字体设置的空格大小)
decode Boolean false 是否解码

                            scroll-top(竖向滚动条地方)

text组件

  • 法定介绍

ca88编程 3

  • 示范用例text.html
<!--text.wxml--><view><text selectable='{{true}}'>欢迎关注:编程坑太多</text></view><view><text>欢迎关注:编程坑太多</text></view><view><text space='{{true}}' decode="true">个人博客:&emsp;&emsp;&emsp;&emsp;idig8.com</text></view><view><text space='{{false}}'>个人博客:&emsp;&emsp;&emsp;&emsp;idig8.com</text></view><view><text decode="true">个人博客:tnidig8.com</text></view>

ca88编程 4

<view class="info">导航到的新页面</view>
2.属性
属性名 类型 默认值 说明
type String icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size Number 23 单位像素,ico大小
color Color ico颜色

                            bindscroll(滚动时触发 )

原创小说,招待转发。转发请注脚:转发自IT人传说会,多谢!原来的作品链接地址:「小程序JAVA实战」小程序的底蕴零部件

来讲下 ,小程序的根底零部件。源码: 中的No.11

微信小程序 基础零部件与导航组件详解:

4.功用呈现

ca88编程 5小程序ico

ca88编程 6

rich-text 富文本

  • 合法介绍

ca88编程 7

  • 躬行实践用例rich-text.html
<!--rich-text.wxml--><view> <rich-text nodes="{{mycontentStr}}"> </rich-text> <rich-text nodes="{{mycontentArray}}"> </rich-text></view>

rich-text.js

//rich-text.js//获取应用实例const app = getApp()Page({ data:{ mycontentStr: '<img src="//www.baidu.com/img/bd_logo1.png" width="270" height="129" >', mycontentArray:[ { name:"img", attrs:{ class:"s_lg_img_gold_show", src:"//www.baidu.com/img/bd_logo1.png", width:"270", height:"129" } } ] }})

rich-text.wxss

/**icon.wxss**/.s_lg_img_gold_show{ width:600rpx;}

ca88编程 8

应用富文本要求特别注意

ca88编程 9

(1) 案例

4.效用展现

ca88编程 10小程序rich-text

logs.js 后缀的 JS 脚本逻辑文件(正是js)

progress 进度条

  • 法定介绍

ca88编程 11

  • 示范用例rich-text.html
<!--progress.wxml--><view> <progress percent="70" show-info="{{true}}" stroke-width="20" color="red" active="{{true}}"></progress> <progress percent="{{mypercent}}" show-info="{{true}}" stroke-width="20" color="red" active="{{true}}" active-mode='forwards'></progress> <view bindtap='addpercent' >增加进度条百分比</view></view>

//progress.js//获取应用实例const app = getApp()Page({ data:{ mypercent:15 }, addpercent:function(){ var newpercent = this.data.mypercent 20; this.setData({ mypercent: newpercent }) }})

ca88编程 12

PS:关于基础零部件部分正是那4块,从后一次始于大家一齐领悟下表单组件

ca88编程 13

   ca88编程 14

1.是什么?

小程序中鲜明的小Logo,蕴含功成名就,失利,下载,找寻,清除。。。等

    媒体组件:

    效果图

4.作用展现

ca88编程 15小程序progress

附上财富☺☟☟

小程序合法示例代码文中代码均对小程序官方示例代码做出过修改,满含足够注释,新加代码测量检验。本文代码示例小程序wiki

            icon:Logo 有两个参数 type(类型)、size(大小)、color(颜色)

    page.wxss

1.是什么?

小程序中展现html,与原生html衔接的富文本

app.json正是您任何项指标配置文件啦

    main.wxss

基本功内容-progress

tabBar 中的 list 是多个数组,只可以布署起码2个、最多5个 tab,tab 按数组的顺序排序。

//获取应用实例
var app = getApp()
//定义额外的文本内容数组
var extraLine = [];
//初始化文本
var init='Initdata! n'
Page({
 data:{
 text:init,
 add:'添加',
 remove:'删除'
 },
/*
*添加一行内容
 */
addLine:function(e){
 extraLine.push("This line is new add!")
 this.setData({
  text:init extraLine.join('n')
 })
},
/*
*删除一行内容
 */
removeLine:function(e){
 if (extraLine.length > 0) {
  extraLine.pop()
  this.setData({
  text:init   'n'   extraLine.join('n')
  })
 }
},
})
1.是什么?

小程序中的文本类型

            text:文本就好像html中的span

progress{
 margin: 50rpx;
}
3.哪些采纳?
<!--示例.wxml--><view> <rich-text nodes="{{nodes}}" bindtap="tap">我是富文本</rich-text></view>

<!--示例.js-->Page({ data:{ nodes:[{ type:text, text:"hello-world" }] }] },tap(){ this.setData({ nodes: [{ name: 'div', attrs: { class: 'div_class', style: 'line-height: 60px; color: red;' }, children: [{ type: 'text', text: 'Hello&nbsp;World!' }] }] }) }})

中间 1rpx 在 酷派5 下 等同于 0.42px  、在中兴6下同样0.5px、在三星6 Plus等同于0.552px

(1)总结

2.属性
属性 类型 默认值 说明
nodes Array/String [] 节点列表/HTML String
  • 要三秋点 : type=node
属性 类型 默认值 必填 说明
name 标签名 String 微信支持的HTML节点
attrs 属性 Object 微信支持的信任html属性
children 子节点列表 Array 结构和nodes一致
  • 文件节点 : type=text
属性 类型 默认值 必填 说明
text 文本 String 支持entites

window下有多少个常用配备:

<view class="nav-view">
 <navigator open-type="navigate" url="../navigator/navigator" class="nav-item" hover-class="nav-hover">导航到新页面</navigator>
 <navigator open-type="redirect" url="../navigator/navigator" class="nav-item" hover-class="nav-hover">当前页面</navigator>
 <navigator open-type="switchTab" url="../index/index" class="nav-item" hover-class="nav-hover">切换Tab</navigator>
</view>

基础内容-rich-text

navigationBarTextStyle(最上端title字体颜色)

(2) 案例

2.属性
属性名 类型 默认值 说明 注释
percent Float 百分比0-100 10%的进度条
show-info Boolean false 是否显示百分比 只要写上show-info,都显示百分比
stroke-width Number 6 进度线条的宽度
color Color #09BB07 进度条颜色 跟activeColor效果一样
activeColor Color 进度条已选择颜色
backgroundColor Color 进度条背景颜色
active Boolean false 进度条前进动画
active-mode String backwards backwards: 动画从头播;forwards:动画从上次结束点接着播 测试,无效果

标配目录结构

     main.wxml

3.哪些使用?
<view> <text>{{text}}</text> <button bindtap="changtext">改变文字</button></view>

Page({ data:{ text : "我是文本" }, changetext:function{ this.setData{ text:"我是改变之后的文本" } }})

        iconPath(为当选时背景图片)

ca88编程 16

3.怎么样选取?
<view> <!--icon代表成功信息,大小93px,背景颜色为黑色--> <icon type="success" size="93" color="black"></icon></view>

其它的等级次序,无非乎type改造。大小,颜色,一样

小程序api

(2) 案例

3.如何使用?
 <view > <!--percent百分比 show-info显示百分比 stroke-width进度条宽度 active动画 activeColor进度条颜色--> <text>显示百分比</text> <view > <progress percent="20" show-info stroke-width="13"/> </view> <text>不显示百分比,进度条颜色</text> <view > <progress percent="40" activeColor="#1f1f13" stroke-width="3" /> <icon type="cancel"></icon> </view> <text>设置颜色,加动画</text> <view > <progress percent="60" active color="#10AEFF" stroke-width="3"/> </view> </view>

pages下的文本夹是你的品种的每三个页面,在那之中那每叁个页面下富含多个文本:

  page.js

基础内容-text

app.js和app.css就但是多介绍了,就是一对大局的js和css 

<view class="progress-view">
 <progress percent="50"/>
 <progress percent="20" stroke-width="10" show-info/>
 <progress percent="40" color="#000"/>
 <progress percent="100" active/>
</view>

基本功内容-icon

     作者想了想。。。。标签自个儿就不一一介绍了,太多呀,那个也简单,用到那三个依然看看api吧

    page.wxml

}

本文由ca88发布,转载请注明来源

关键词: WeChat 基础 日记本 程序 组件