智能小程序文檔：https://smartprogram.baidu.com/developer/index.html （點擊進入文檔 - 開發）
下載開發工具：https://smartprogram.baidu.com/docs/develop/tutorial/index_first/ （根據自己電腦選擇下載對應版本：Windows 64版 ｜ Mac版）
新建 - 下一步 - 填寫項目名稱（自己取名）、項目目錄（存放小程序代碼的文件夾，需提前新建好）、AppID（此為項目ID，目前暫不支持個人開發申請，則點擊 體驗：智能小程序）- 完成
打開后可看到小程序中的各類組件使用效果，及代碼示例，可供開發參考學習。
以下將分三步學習小程序基礎開發：
第一步： 基本配置 （參考文檔：簡易教程 - 全局配置）
1、目錄結構
2、配置界面、路徑
可以通過配置 app.json 文件，設置 SWAN 的界面、路徑、多 TAB 等。
app.json文件
1 { 2 // 配置頁面路徑，此為必須配置，否則頁面無法編譯出來 3 "pages": [ 4 "pages/index/index", 5 "pages/detail/detail" 6 ], 7 // 配置app頭部樣式以及文字內容等等 8 "window": { 9 "navigationBarTitleText": "Demo" 10 }, 11 // 配置app底部tab樣式以及文字內容等等 12 "tabBar": { 13 "list": [{ 14 "pagePath": "pages/index/index", 15 "text": "首頁" 16 }, { 17 "pagePath": "pages/detail/detail", 18 "text": "詳情" 19 }] 20 } 21 }
3、了解生命周期，常用的一般是onLoad，頁面加載完成的時候觸發,相當於vue中的mounted，比如請求數據的方法在vue中mounted里調用，而小程序中則在onLoad中調用
4、事件處理函數
在小程序中事件函數跟vue.js相似，例子點擊事件 vue.js：@click="tapAction" 小程序： bind:tap="tapAction"（也可以省略寫為 bindtap="tapAction"）
然而帶值給方法 vue.js：@click="tapAction (index, item) " 小程序：bind:tap="tapAction" data-index="{{index}}" data-item="{{item}}" (格式為：data-自定義命名="{{所需要帶給方法的值}}")
index.swan文件
<view s-for="item, index in list"> <text bind:tap="tapAction" data-index="{{index}}" data-item="{{item}}">{{item}}</text> </view>
index.js文件
Page({ data: { list: ['列表1', '列表2', '列表3'] }, // 頁面加載完成的生命周期方法 onLoad() { }, // 方法 - 列表點擊 tapAction(e) { console.log(e) // 傳過來的值會在e.currentTarget.dataset里接收到，打印出來截圖看下方”附上圖“
}
});
附上圖：
第二步： 使用組件，開始開發頁面結構布局（參考文檔：組件）
智能小程序中提供了豐富多樣的組件，開發者可以在 .swan 文件中，使用組件開始完成自己的智能小程序頁面。
組件示例：
1、view：視圖容器（相當於html中的div，用來當作包裹容器，每個view獨占一行）
text：放文本的元素（相當於html中的span，用來放置文本，在同一行顯示）
index.swan文件
// view相當於塊級標簽div,text 相當於行內標簽span <view class="view"> <text class="text ">view 相當於塊級標簽</text> <text class="text ">text 相當於行內標簽</text> </view>
2、rich-text：富文本（可用於解析包含html標簽的文本）
index.swan文件
<rich-text nodes="{{nodes}}"></rich-text>
index.js文件
Page({ data: { // 綁定的值 nodes: ‘這是一個span標簽<span style="color: red;">高亮</span>’ } })
輸出結果為：這是一個span標簽高亮
3、input輸入框
index.swan文件 <input value="{{inputValue}}" placeholder="請輸入內容" bind:change="inputChange" ></input>
index.js文件 Page({
data: { // input框默認值 inputValue: '',
}, // 當slider組件發生改變時綁定的事件 inputChange() { console.log('input組件改變了'); } });
以上例子為最常用的布局組件，其他根據開發所需自行看開發文檔，文檔中均會提供使用例子，基本使用方法與如上例子無異。
第三步： 使用API，頁面結構布局需調用 swan 對象上的端能力方法，一切皆在swan.xxx上實現。（參考文檔：API）
API示例：
1.、request：發起網絡請求（請求接口數據）
index.swan文件
// 在.swan上使用data里的數據 <view class="view">{{dataList}}</view>
index.js文件
Page({ data: { dataList: '' }, // 頁面加載完成的生命周期方法 onLoad() { // 頁面加載完成時調用請求數據的方法 this.getDataAction(); }, // 請求數據的方法 getDataAction() { swan.request({ url: 'https://smartprogram.baidu.com/xxx', // 改為自己的接口地址 method: 'GET', dataType: 'json', data: { // 改為自己的接口所需的參數 key: 'value' }, header: { 'content-type': 'application/json' // 默認值，不用管 }, success: res => { //成功回調 console.log(res.data); // 把請求成功返回的res數據賦值給data里的dataList，供頁面上.swan使用，然而說到這么設置的原因，可以打印出this,console.log(this),看如下圖，可看到里面會有setData方法，用於修改data里的值，而getData可以想到是獲取data里的值，但是一般會使用this.data.dataList來代替，比較常用 this.setData({ dataList: res.data })
// 賦值之后，console.log(this)打印this,看如下圖，可以點開看到data里的數據，如上data里的數據,現在的dataList已為賦值后的值
console.log(this.data.dataList) }, fail: err => { //失敗回調 console.log('錯誤碼：' + err.errCode); console.log('錯誤信息：' + err.errMsg); } }); } });
console.log(this)打印結果
2.、navigateTo：跳轉到某個頁面（相當於路由）
index.swan文件 // 在.swan上加一個點擊跳轉頁面的方法 <view class="view" bind:tap="clickAction">點擊</view>
index.js文件 Page({ data: { }, // 頁面加載完成的生命周期方法 onLoad() { }, // 點擊后的方法 clickAction() { swan.navigateTo({
// 此路徑去到detail頁面，為app.json的pages里配置的路徑，？后直接傳遞參數
url: 'pages/detail/detail?key=value'
});
}
});
3、showToast：顯示消息提示框（提示消息）
index.swan文件 // 在.swan上加一個點擊顯示消息提示框的方法 <view class="view" bind:tap="clickAction">點擊</view>
index.js文件 Page({ data: { }, // 頁面加載完成的生命周期方法 onLoad() { }, // 點擊后的方法 clickAction() { swan.showToast({ title: '我是標題', icon: 'loading',// 如果不想有icon圖標則設置為'none' duration: 1000// 消息提示框顯示多長時間，單位毫秒，默認2000 }); } });
以上例子為最常用的API方法，其他根據開發所需自行看開發文檔，文檔中均會提供使用例子，基本使用方法與如上例子無異。
看完之后應該能夠實現一個簡單的布局效果。