一、前言
小程序上手很快，有一定基礎的朋友通過實例學習，一天左右時間就可以學習完畢，筆者這里為新手分享相關的學習實例，供朋友們學習和參考，希望能夠幫助到你。
二、開發工具
微信開發者工具下載：
| 版本 | 地址 |
| --- | --- |
| 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
}
~~~