微信小程序初识

目录

一、微信小程序的优劣势

1、优势

2、劣势

二、 项目的目录结构

三、小程序模板语法WXML

1、逻辑渲染

2、列表渲染

4、wxss

5、修改页面数据

一、微信小程序的优劣势
1、优势
微信助理，容易推广。在微信中，小程序拥有众多入口，例如附近的小程序、小程序码、分享、发现-小程序等五十多个的入口。这些入口有助于企业更好的获取流量，从而进行转化、变现。
使用便捷。用户在使用小程序时，只需要轻轻点一下就可以使用，更加符合用户对使用方便、快捷的需求，所以小程序的用户数量不断增加。
体验良好，有接近原生app的体验。在微信生态里，小程序在功能和体验上是可以秒杀掉 H5 页面的，H5 页面经常出现卡顿、延时、加载慢、权限不足等原因，而这些问题在小程序里都不会出现。
成本更低，从开发成本到运营推广成本，小程序的花费仅为APP的十分之一，无论是对创业者还是传统商家来说都是一大优势。

2、劣势
单个包大小限制为2M，这导致无法开发大型的应用，采用分包最大是20M（这个值一直在变化，以官网为准）。
需要像app一样审核上架，这点相对于H5的发布要麻烦一些。
处处受微信限制。例如不能直接分享到朋友圈，涉及到积分，或者虚拟交易的时候，小程序也是不允许的。

二、 项目的目录结构
pages:
wxml: 编写小程序界面结构的地方
wxss: 编写小程序样式的地方
json：编写界面配置的地方
js：编写界面逻辑的地方
utils: 编写工具类的地方
app.js：创建程序实例的位置
app.json: 编写全局配置地方
app.wxss: 编写全局样式的地方
project.config.json: 项目的配置文件
sitemap.json：配置哪些网站可以被检索到
 配置tabBar

在移动端经常会涉及到tabbar的使用，小程序直接给我们提供了配置tabbar的方法。

这里需要注意的是，tabbar的图标不能是线上的地址，需要提前准备好放到项目里，一般情况下，这些静态资源可以放在assets文件夹下。这些图标大家可以从阿里矢量图标库中进行下载iconfont-阿里巴巴矢量图标库。

 "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "assets/icons/index.png",
      "selectedIconPath": "assets/icons/index-active.png"
    },{
      "pagePath": "pages/my/index",
      "text": "我的",
      "iconPath": "assets/icons/wode.png",
      "selectedIconPath": "assets/icons/wode-active.png"
    }]
  },

三、小程序模板语法WXML
WXML 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。

在小程序中没有H5提供的那些标签了，这里我们需要使用小程序给我们提供的组件。小程序给我们提供的标签很多，这里我们就介绍几个常用的，剩下的大家可以结合文档使用。

view标签是我们开发过程中最常用的标签了，这个就相当于Html中的div。

text标签也是我们开发中常用的，这个相当于Html中的span

image标签相当于我们Html中的img。

1、逻辑渲染
WXML 中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块，使用 wx:elif 和 wx:else 来添加一个 else 块：
 
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
除此之外微信小程序还可以通过hidden属性进行条件渲染。wx:if在不满足条件的时候会删除掉对应的DOM，hidden属性则是通过display属性设置为none来进行条件渲染。
 
<view hidden="{{condition}}">
隐藏
</view>

2、列表渲染
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

<view wx:for="{{list}}" wx:key='index'>{{item.name}}----{{index}}</view>
 
 
 list: [{
        name: '一',
      },
      {
        name: '二'
      }
    ],
使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名。
 
<view wx:for="{{list2}}" wx:key='index2' wx:for-item='item2' wx:for-index='index2'>{{item2.name}}----{{index2}}</view>
 

3、模板

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>
 
msgList: [{
        index: 0,
        msg: '哈哈哈',
        time: '16:30'
      },
      {
        index: 1,
        msg: '嘻嘻嘻',
        time: '16:40'
      }
    ],
 
<view wx:for="{{msgList}}">
  <template is='msgItem' data="{{...item}}"></template>
</view>
引用import和include
 
<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>
 
 
<import src="item.wxml"/>
 
<template is="item" data="{{text: '测试'}}"/>
include是引用除了template之外的内容

4、wxss
在WXSS中，引入了rpx（responsive pixel）尺寸单位。引用新尺寸单位的目的是，适配不同宽度的屏幕，开发起来更简单。

在小程序中，规定所有手机的屏幕宽度都是750rpx，所以在不同尺寸的屏幕下1rpx的宽度都不同。

1rpx = （屏幕宽度/750）px

在iphone6手机下，屏幕宽度是375px，所以1rpx=0.5px。

在小程序中，样式引用是这样写：

@import './test_0.wxss'

5、修改页面数据
 this.setData({ msg: 'Hello World' })