微信小程序入门级教程一

微信小程序入门一

本文只做简单介绍：具体请查看文档微信小程序开发文档

一：基础标签介绍

1.1：view视图容器
view相当于html中的div，有四种属性

hover-class 指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果
hover-stop-propagation 指定是否阻止本节点的祖先节点出现点击态
hover-start-time 按住后多久出现点击态，单位毫秒
hover-stay-time 手指松开后点击态保留时间，单位毫秒

1.2：text文本
由于使用view标签所显示的文字，是不能选中复制的，text标签则需要设置user-select=”true",表示文本可选

space：显示连续空格
decode：是否解码，对于html中的特殊字符，如 等

1.3：image媒体组件
使用 show-menu-by-longpress属性可以显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单

show-menu-by-longpress
mode：mode=“widthFix” 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变，常用

1.4：navigator导航
属性：

target: 实现小程序之间的跳转
src：当前小程序内的跳转路径
重点：open-type：跳转方式
第一个表示：可以跳到新的页面，也可以返回，但是不能跳到tabbar 页面，就是不能使用下面的导航栏
第二个表示：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
第三个表示：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，但是不能携带参数
第四个reLaunch表示：关闭所有页面，打开到应用内的某个页面，可以携带参数

1.5：scroll-view视图容器
属性

scroll-x：允许横向滚动
scroll-y：允许纵向滚动
scroll-top：设置竖向滚动条位置
scroll-left：设置横向滚动条位置
更多属性请看官方文档

1.6：swiper视图容器
视图滑动容器，只可放置swiper-item组件，否则会导致未定义行为。
属性：

indicator-dots：是否显示面板指示点
indicator-color：指示点颜色
indicator-active-color：当前选中的指示点颜色
circular：是否采用衔接滑动
vertical：滑动方向是否为纵向
autoplay：是否自动切换

1.7：表单组件多个

button按钮
属性：

size：default：默认大小。mini：小尺寸
type：primary：绿色，default：白色，warn：红色
plain：按钮是否镂空，背景色透明
open-type：用户采集信息使用
loading:加载动画

checkbox复选框
input：输入框

二：基础框架介绍

2.1：tabBar
通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

在app.json文件中配置

{"pages":["pages/index/index","pages/demo2/demo2",    "pages/logs/logs","pages/demo/demo",   "pages/about/about","pages/demo3/demo3","pages/demo4/demo4","pages/demo5/demo5","pages/demo6/demo6"],"window":{"backgroundTextStyle":"dark","navigationBarBackgroundColor": "#ccc","navigationBarTitleText": "新视觉实训","navigationBarTextStyle":"white"},"tabBar":{"color":"#c30","selectedColor":"#0ff","backgroundColor":"#ccc","borderStyle":"white",    "list":[{"pagePath":"pages/index/index","text":"首页","iconPath":"images/home.png","selectedIconPath":"images/home-h.png"},{"pagePath":"pages/demo/demo","text":"案例","iconPath":"images/list.png","selectedIconPath":"images/list-h.png"},{"pagePath":"pages/logs/logs","text":"日志","iconPath":"images/user.png","selectedIconPath":"images/user-h.png"}]},"style": "v2","sitemapLocation": "sitemap.json"
}

2.小程序出现下拉刷新效果如下：

在组件中配置

{"usingComponents": {},"navigationBarTitleText":"案例展示","navigationBarBackgroundColor":"#000","enablePullDownRefresh":true,"backgroundColorTop":"#f00"
}

3.数据绑定
数据绑定需要在标签中使用{{}}括号
首先在login.wxml中配置

再从login.js中配置，完成数据渲染

对于对象和数组的存储方式：

<view>{{listArr}}</view><view>
{{obj.name}}
{{obj.age}}
</view>

  /*** 页面的初始数据*/data: {message: "微信小陈相关v开发",text:"北京欢迎您",listArr: ["java高级","springBoot","SpringCloud"],obj:{name: "五",age: 15,sex: "男"}},

4.条件渲染和列表渲染
条件渲染和列表渲染一般使用.js文件中的data返回数据
案列

<view wx:if="{{day==1}}">周1</view>
<view wx:elif="{{day==2}}">周2</view>
<view wx:elif="{{day==3}}">周3</view>
<view wx:elif="{{day==4}}">周4</view>
<view wx:elif="{{day==5}}">周5</view>
<view wx:elif="{{day==6}}">周6</view>
<view wx:elif="{{day==7}}">周天</view>
<view wx:else>错误</view>