微信小程序入门级教程一

微信小程序入门一

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

一：基础标签介绍

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>