一、前言
小程序上手很快，有一定基础的朋友通过实例学习，一天左右时间就可以学习完毕，笔者这里为新手分享相关的学习实例，供朋友们学习和参考，希望能够帮助到你。
二、开发工具
微信开发者工具下载：
| 版本 | 地址 |
| --- | --- |
| win 64 | [点我下载](https://servicewechat.com/wxa-dev-logic/download_redirect?type=x64&from=mpwiki) |
| win 32 | [点我下载](https://servicewechat.com/wxa-dev-logic/download_redirect?type=ia32&from=mpwiki ) |
| ios | [点我下载](https://servicewechat.com/wxa-dev-logic/download_redirect?type=darwin&from=mpwiki) |
开发者账号注册地址：[点击这里注册一个小程序](https://mp.weixin.qq.com/wxopen/waregister?action=step1)
注册完毕后进入到后台管理界面，然后配置小程序相关的信息，名称、头像、关联公众号等。
注：如果不知道后续怎么登录小程序后台，使用小程序的账号登录公众平台就可以了。
公众平台登录地址：https://mp.weixin.qq.com/
三、使用工具创建一个新的小程序
步骤一：打开微信开发者工具
步骤二：创建一个新的小程序
得到的小程序文件如下
四、小程序json配置文件
~~~
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "演示测试",
"navigationBarTextStyle": "black"
},
"tabBar": {
"color": "#4f6578",
"selectedColor": "#1fba09",
"borderStyle": "light",
"list": [
{
"pagePath": "pages/index/index",
"selectedIconPath": "pages/img/home-1.png",
"iconPath": "pages/img/home.png",
"text": "首页 "
},
{
"pagePath": "pages/about/index",
"selectedIconPath": "pages/img/me-1.png",
"iconPath": "pages/img/me.png",
"text": "介绍"
}
]
}
}
~~~
pages：小程序的所有界面需要在pages里声明路径
window：参数中控制头部颜色及标题相关信息，详细看官网的手册。
tabBar：是小程序底部菜单部分，控制菜单的样式与图标路径等。
五、在配置文件中配置完毕以后进入index页面
1、小程序界面的几个文件
index.wxml 小程序的html代码
index.wxjs 小程序的js代码
index.json 页面配置文件
index.wxss 小程序样式
2、基本界面布局
wxml、沿用前端写法，不过这里要注意小程序中的标签仅有view、button 、text 等界面元素。通常使用view button text，还有相关部分标签，表单等在官网中可以找到介绍。
wxss、通过小程序中的部分样式通过类来控制，这里只能用class来控制，样式的方法与css相同，部分微信自带样式不同。这里大多数情况下开发使用css的基础知识就可以完成界面的样式布局等功能。
3、基本wxjs介绍
小程序中的wxjs需要使用小程序中封装的js方法来进行开发，数据接口、元素删减等等，界面交互特效。
数据接口实例：
~~~
Page({
data: {
duration: 2000,
indicatorDots: true,
autoplay: true,
interval: 3000,
loading: false,
plain: false
},
onLoad: function () {
var that = this
wx.request({
url: '接口地址 https 地址',
method: 'get',
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
//将获取到的json数据，存在名字叫zhihu的这个数组中
that.setData({ lists: res.data })//这里将数据赋值到了lists中
}
})
}
}）
~~~
前端数据渲染：将接口获得的数据循环输出
~~~
<block wx:for="{{lists}}" wx:key="*this">
<view class="item" data-index="{{index}}" >item {{index}}--{{item.text}}</view>
</block>
~~~
4、页面的json文件
~~~
{
"navigationBarTitleText": "这是单页标题控制的json数据"
}
~~~
详细的官方参数：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
5、页面的样式
wxml文件
~~~
<view class='page'>
<scroll-view class="scroll" scroll-y="true">
<view class="classname"></view>
<block wx:for="{{lists}}" wx:key="*this">
<view class="item" data-index="{{index}}" >item {{index}}--{{item.text}}</view>
</block>
</scroll-view>
<view class="btn">
<button type="primary" bindtap="addItemFn" >添加</button>
</view>
<view class="btn">
<button type="warn" bindtap="delItemFn" >删除</button>
</view>
</view>
~~~
wxxs文件
~~~
.page{
margin: 0 auto;
padding: 10rpx;
}
.scroll{height:600rpx;border: 1px solid #ccc;}
.item{ margin-top:10rpx;background: #ddd; height: 40rpx;}
.btn{
width: 45%;
margin: 10rpx;
float: left
}
~~~
注：与css类似，但小程序要注意的是只能使用class做样式设置
六、本章实例：元素动态增加删减
wxml文件：
~~~
<!--index.wxml-->
<view class='page'>
<scroll-view class="scroll" scroll-y="true">
<view class="classname"></view>
<block wx:for="{{lists}}" wx:key="*this">
<view class="item" data-index="{{index}}" >item {{index}}--{{item.text}}</view>
</block>
</scroll-view>
<view class="btn">
<button type="primary" bindtap="addItemFn" >添加</button>
</view>
<view class="btn">
<button type="warn" bindtap="delItemFn" >删除</button>
</view>
</view>
~~~
wxjs文件
~~~
//获取应用实例
var app = getApp()
Page({
//事件处理函数
addItemFn: function () {
var { lists } = this.data;
console.log({ lists});
var newData = { text: "12212" };
lists.push(newData);
this.setData({
lists: lists
})
},
//删除新元素
delItemFn: function (e) {
var { lists } = this.data;
var num = e.currentTarget.dataset.index;//获取data-index
lists.splice(num, 1);
this.setData({
lists: lists
})
}
})
~~~
wxcss文件
~~~
/* index.wxss */
.page{
margin: 0 auto;
padding: 10rpx;
}
.scroll{height:600rpx;border: 1px solid #ccc;}
.item{ margin-top:10rpx;background: #ddd; height: 40rpx;}
.btn{
width: 45%;
margin: 10rpx;
float: left
}
~~~