大家好我是小逗号，今天给大家带来一篇小微信小程序的基础教学，希望大家喜欢。
前言
小程序不用下载就能使用的应用，经过几年的发展也很火爆，呢么它的优势在哪里呢？我的分析有以下几点：
- 方便快捷，不用下载，即用即走，由于微信的流量，有利于推广。
- 速度快不占内存，开发成本低，维护方便。
- 安全稳定，功能强大，使用业务丰富。
通过以上几点的分析，您是不是迫不及待的准备入手呢？别着急，您如果经常游走在前端，微信小程序对于您看来说可能会上瘾哦！
微信小程序官方网站：developers.weixin.qq.com/miniprogram…
首先下载微信开发者工具
开始是这样子，如图：
当我们选择好之后就来来主页面
-
左边是我们视图区域。
-
右上是我们的代码区域。
-
右下是我们的调试区。
完成之后我们看下一步
微信小程序目录结构
如下参照小程序文档 ：developers.weixin.qq.com/miniprogram…
├── pages（页面目录）
│ └── home (app.json 设置的入口页)
│ ├── home.wxml（页面标签结构）
│ ├── home.js（逻辑层）
│ ├── home.json（配置层）
│ └── home.wxss（样式层）
├── utils（公共模块，工具类）
│ ├── config.js（项目配置）
│ └── local.config.js (本地配置，git忽略)
├── app.js（全局逻辑）
├── app.json（全局配置）
├── app.wxss（全局样式）
├── project.config.json（工具配置）
└── README.md
全局配置文件
{
"pages": [
"pages/index/index"
],
// 路由，第一个表示默认最先显示
"window": {
"backgroundTextStyle": "light",
// 下拉 loading 的样式，仅支持 `dark` / `light`
"navigationBarBackgroundColor": "#fff",
// 导航栏背景颜色
"navigationBarTitleText": "Weixin",
// 导航栏标题文字内容
"navigationBarTextStyle": "black"
// 导航栏标题颜色，仅支持 `black` / `white`
},
"style": "v2",
// 样式的一个版本
"sitemapLocation": "sitemap.json"
}
全局样式文件
- 小程序我们这里使用rpx，这是一个响应式单位。
- @inport ‘相对路径’ 样式导入。
- 不支持通配符。
微信小程序四种文件
.json后缀的JSON配置文件.wxml后缀的WXML模板文件.wxss后缀的WXSS样式文件.js后缀的JS脚本逻辑文件
微信小程序经常使用语法结构
<view>{{name}}</view>
// 块标签,相当于div
<text>{{name}}</text>
// 文本
<button>{{name}}</button>
// 按钮
<view wx:for="{{list}}" wx:key="index" >
{{item}}
</view>
// 循环
<text wx:if="{{motto}}">
我是：{{name}}
</text>
<view wx:else>
我是：猪八戒
</view>
// 判断语句
<view hidden="{{num}}">张三</view>
// 显示隐藏
<image src="../../img/ic.jpg"></image>
// 图片的引入
<icon type="success"></icon>
// 图标，type为图标的类型
<rich-text nodes="{{htmlSnip}}">
</rich-text>
// 富文本
<input type="text" placeholder="请输入"/>
// input框
<radio-group bindchange="getRadio">
<radio color="red" value="北京">北京</radio>
<radio color="red" value="上海">上海</radio>
<radio color="red" value="深圳">深圳</radio>
<radio color="red" value="广州">广州</radio>
</radio-group>
// 单选框
<checkbox-group bindchange="getcheckbox">
<checkbox color="red" value="郑州">郑州</checkbox>
<checkbox color="red" value="武汉">武汉</checkbox>
<checkbox color="red" value="西安">西安</checkbox>
<checkbox color="red" value="合肥">合肥</checkbox>
</checkbox-group>
// 多选框
<picker bindchange="setIndex" range="{{arr}}">
<text>
所在地：{{arr[index]}}
</text>
</picker>
// 底部滚动选择器
<template name="good">
<view class="good-list">
<image class="good-img" src="../../img/ic.jpg"></image>
<view class="good-info">
<text class="title">微信小程序</text>
<text class="num">¥ 9.9</text>
<text class="text">前端小程序在线课程全套视频</text>
</view>
</view>
</template>
<template name="title">
<text class="titles">{{data.title}}</text>
</template>
<view>
<template is="title"></template>
<template wx:for="{{[1,2,3]}}" is="good" wx:key="index">
</template>
</view>
// 引入展示template模板is为上面定义的name
var title = require("./titles.wxs")
var list = [1,2,3]
module.exports={
title:title.titles,
list:list
}
引入../../wxsJS/demo4.wxs 的模块
<wxs src="../../wxsJS/demo4.wxs" module="data"></wxs>
<import src="../demo4/index"></import>
// 在 demo4/index 中引用了 index.wxml，就可以使用模板：
<view>
<include src="../demo4/index"></include>
// 引入全部的index.wxml
<template is="title"></template>
<template is="good"></template>
// 引入局部的template模板
</view>
事件处理
- 点击事件
<button bindtap="fun">点击</button>
// 触发事件
<button catchtap="fun">点击</button>
// 阻止冒泡
- 事件传参 给标签加 data-参数名 获取参数，e.currentTarget.dataset.参数名字
