這幾天研究了哈小程序開發，使用過的是HBuilder和微信開發工具：
.下載HBiulder和微信小程序開發工具(穩定版)。
- https://www.dcloud.io/hbuilderx.html HBiulder
- https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 微信小程序開發工具下載完
下載完后它有一個引導頁，教你了解怎么使用，看完后點擊文件新建項目，創建一個原有的的hello模板來熟悉它：
創建好后，我們來介紹哈目錄結構：
components：組件目錄，放復用組鍵
pages:業務頁面文件存放目錄
static：靜態資源存放(圖片、視屏、音頻等)，靜態資源只能放在這
APP.vue:應用配置，用來配置APP全局樣式以及監聽應用生命周期
main.js:Vue初始化入口文件
mainfest.json:配合應用名稱、appid、logo、版本等打包信息
pages.json：配置頁面路由 、導航條、選項卡等頁面信息
項目最開始由main.js作為入口進入注冊的組件，然后去讀取pages.json文件，這個文件里面的Pages：里面就是放置的你將要顯示的一些功能頁面（當作是一本書的目錄,根據目錄的頁數路徑去找到對應的功能頁面），注意：Pages里面第一個頁面就是默認的首頁。
想要使用全局的CSS樣式，則需要在APP.vue里面去導入組件（@import "自定義全局樣式路徑"），這樣才能在后面的功能頁面中class="樣式"了。若某個頁面需要單獨的使用某些東西，就需要單獨導入自定義組件，並使用組件:components: {自定義的組件名},
然后就是幾個基本的初始方法：
onlaunch：當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）（app.js）；
onLoad: 頁面加載：小程序注冊完成后，加載頁面，觸發onLoad方法。一個頁面只會調用一次，
onShow: 頁面顯示
onReady: 首次顯示頁面，頁面初次渲染完成，會觸發onReady方法，渲染頁面元素和樣式，一個頁面只會調用一次，
onHide: 頁面隱藏：當navigateTo或底部tab切換時調用。
onUnload: 頁面卸載
要注意的就是這些，中間使用的是Vue.js的方法，當然也可以使用js，但是建議使用vue.js。
然后是頁面基本的結構分為三部：
第一部由<template></template>標簽組成的顯示界面，用於顯示的，
建議使用uni-app給出的顯示格式，這樣不至於打包多種形態的時候去轉換，也會有很多方法，基本的綁定變量:test ,綁定事件@click:"change" ，和循環v-for="(item,index) in list" :key="index" 要會，這個在官方的文檔里面都有：
https://uniapp.dcloud.io/component/README
第二部是由<script></script>標簽組成的方法執行。業務邏輯。
//引入自定義組件 import 組件名from '組件的路徑' (最好是絕對路徑) //引入模塊 export default { //若上面引入了自定義組件，則需要引入使用才能生效 components: { 組件名, }, //參數值， data() { //必須接入return才能返回使用在上面的顯示中 return { //定義的一個數據，用於接受后端發送過來的值，等會兒便利在上面顯示 List:[], } }, //定義方法的地方，所有的需要執行的方法，如點擊時間等都是在這里面定義，它才會對應 methods: { /* 頁面跳轉過來就執行的加載頁面 */ onLoad(){ //uni-app原生的加載中動畫 uni.showLoading({ title: '加載中', mask: false }); //執行自定義的數據填充方法 this.load(); //關閉頁面刷新 uni.startPullDownRefresh(); }, /* 頁面刷新 */ onPullDownRefresh() { console.log('刷新頁面'); /* 1秒后關閉刷新 */ setTimeout(function() { uni.stopPullDownRefresh(); }, 1000); }, //自定義的數據加載的方法 load() { //uni-app定義的發送請求的方法 uni.request({ //自己后台的訪問接口，若需要帶參訪問，直接后面拼接就是，或者下面的data中聲明 url:"localhost:8008/testManager/interface/test", //響應格式 dataType:'json', //參數，這里面的參數會跟着url發送出去 data:{}, //請求成功返回 success:(res)=>{ console.log('success', res); //返回200狀態碼表示成功 if (res.statusCode == 200) { //隱藏加載中動畫 uni.hideLoading(); if (res.data.List.length>0) { //有數據 for (var i = 0; i < res.data.List.length; i++) { var test= {}; test["DEMO01"] =res.data.List[i].DEMO01; test["DEMO02"] = res.data.List[i].DEMO02; this.List.push(test); } } else { console.log("沒有數據!") } } }, //失敗放回函數 fail(res) { console.log("查詢問題返回失敗...!") } }) }, } }
第三部就是由<style></style>標簽組成的設置樣式的。這個去看CSS就行了。