Title：最近做完了項目，review代碼的同時，就想寫一篇詳細的小程序開發經歷，記錄自己的項目從0到1的過程
Desc : 小程序從0到1，從小白到完成項目，你需要這樣做：
step1: 基礎知識准備
知識儲備： html5， CSS3， js(ES6), 組件化思維
wepy： https://tencent.github.io/wepy/document.html#/
js-阮一峰： http://javascript.ruanyifeng.com/
js-git-廖雪峰： https://www.liaoxuefeng.com/
ES6-阮一峰 ： http://es6.ruanyifeng.com/
小程序文檔： https://developers.weixin.qq.com/doc/
Vscode快捷鍵： https://www.cnblogs.com/fanghl/p/11269644.html
前端框架太多了，多到每個公司使用的技術棧都可能和你掌握的不一樣，但是別怕，萬變不離其宗，走到天涯海角也是 html5， CSS3，js ，組件化這四部分構成，之所以框架很多，是因為每個公司的業務需求不一致。Vue、react、angular三大框架，其中又衍生了根據這三種框架來的小框架，這里主要講Vue，微信小程序開發可以使用官方提供的原生wxml、wxss、wxs，嗯，和html，css， js對比一下，換了個名稱而已（自帶狗頭滑稽），也可以使用Vue思想的框架wepy,wepy完全繼承了Vue的寫法，只要熟悉Vue，wepy上手很快的。
step2:梳理項目
前端項目，移動端為主，主要涉及三個方面：UI、前端邏輯、數據三部分，UI產品經理會給你設計流程稿，美工會給你需要的樣式素材 、后端會給你返回數據。我們只需要搭出頁面，運用數據，以前jquery時代，要操作DOM樹來改變頁面的顯示，DOM如下圖：
說白了，DOM樹就是HTML標簽的關系！！寫HTML的時候，標簽之間總要嵌套吧，最外層是<html>，一個頁面的其他標簽都在<html>中包裹着，對吧？有包裹着的關系，也有並列關系，基於這兩種關系，換成專業術語，就是父子、兄弟關系，用樹結構描述出來就是DOM的樹結構，簡稱DOM樹，在DOM樹里面，我們可以通過標簽（HTML元素）的class類名或者 ID 找到這個標簽，
/**
*獲取標簽
*/
let div1 = document.getElementById('idName') //原生 let div2 = $('idName') //jquery function $(id) { //jq的$選擇器簡易源碼原理 return document.getElementById('id') }
//獲取到目標之后，可以對目標做操作，包括但不限於改變目標的文字內容、背景顏色、插入子元素、插入子模板，隱藏、顯示、添加點擊事件或其他事件等等，
之所以用樹結構來描述，就是因為這樣一目了然，關系很明確。而且還可以通過一個標簽，找到他的子元素，父元素、兄弟元素、祖宗元素，進而對它們進行操作,例如：
let getFirstChild = document.getElementById("test").children[0]; let p = document.getElementById("test").parentNode; let brother5 = document.getElementById("test").nextSibling;
以上是原生和jq的操作DOM樹模式，這種方式現在已經不常用，但需要了解一下，現在常用的框架，幾乎都是組件式開發，數據驅動、已經不操作DOM樹了！！！！！
進入數據驅動模式：：
開發一個項目，產品會上說明開發需求，在把pr(設計需求文件)發給前后端和美工，三方開發開發，也就是說前端在沒和后端對接口之前，都需要使用模擬數據，那么，一個普通項目可能會包含什么？事件、內容填充、頁面跳轉。就這三部分！！！
事件： wepy和Vue中，綁定事件用 v-on 簡寫 @tap = ‘eventName’ 原生和jq中用 onclick=eventName()" 大同小異
內容填充： 即用后端返回來的數據，把他們放到頁面中去，
js代碼如下：
// 獲取名片信息 getCardInfo( user_id ) { const that = this circleApi.getCardInfo({ data: { user_id, card_is_mine: -1 //默認-1 ====》圈內 }, getToken: true }).then( res => { log('獲取我的名片信息', res) let data = res.data that.cardInfo = data that.$apply() }) }
html標簽代碼：（這個view是在<template>當中的）
<view class="myCardContent"> <view class="redHeader"></view> <view class="contentBox"> <image class="headImgCard" src="{{cardInfo.avatar}}" mode="aspectFill"></image> <view class="professionInfo">{{cardInfo.career}}</view> <view class="userId">ID: {{cardInfo.user_id}}</view> <!-- 用戶信息展示欄 --> <view class="cardInfoBox"> <view class="item">性別: <sapn class="attribute"> {{cardInfo.gender}}</sapn></view> <view class="item itemRight">年齡: <sapn class="attribute"> {{cardInfo.age}}年</sapn></view> <view class="item">居住地: <sapn class="attribute"> {{cardInfo.place_of_residence}}</sapn></view> <view class="item itemRight">學歷: <sapn class="attribute"> {{cardInfo.education}}</sapn></view> <view class="item">身高: <sapn class="attribute"> {{cardInfo.height}}cm</sapn></view> <view class="item itemRight">年薪: <sapn class="attribute"> {{cardInfo.annual_salary}}</sapn></view> <view class="item">住房: <sapn class="attribute"> {{cardInfo.house}}</sapn></view> <view class="item itemRight">車輛: <sapn class="attribute"> {{cardInfo.car}}</sapn></view> </view> <!-- 用戶信息簡介 --> <view class="tipChildIntroduce">孩子介紹 <view class="orangeLine"></view> </view> <view class="childIntrodCont">{{cardInfo.child_introduction}}</view> <!-- 用戶擇偶條件 --> <view class="tipChildIntroduce">擇偶條件 <view class="orangeLine"></view> </view> <view class="childIntrodCont">{{cardInfo.spouse_description}}</view> <!-- 用戶生活照 --> <view class="tipChildIntroduce">生活照 <view class="orangeLine"></view> </view> <view class="lifeImgBox {{isMinePage ? 'marginBottom' : ''}}"> <repeat for="{{cardInfo.photos}}" item="item"> <image src="{{item}}" class="lifeImg" @tap="liveImg" data-index="{{index}}" mode="aspectFill"></image> </repeat> </view> </view> </view>
數據操作的精髓 ↑
而如果在jq中，你拿到數據之后，還要把數據一條條插進DOM中，看下代碼：
// 獲取名片信息 === jq版 getCardInfo( user_id ) { const that = this circleApi.getCardInfo({ data: { user_id, card_is_mine: -1 //默認-1 ====》圈內 }, getToken: true }).then( res => { log('獲取我的名片信息', res) let data = res.data let sexDom = $('sexClassName').innerText = res.gender;
let ageDom = $('sexClassName').innerText = res.age;
***
有多少條數據需要插入，就得操作DOM多少次！！！！！嚇人不
})
}
數據填充二： 數據模板插入。就是后端給你返回了10條商品數據，你得把這10個商品全部展示出來對吧，看例子：
如上圖，后端返回了我們圈子的列表，圈子分為四種，career_circles、local_circles、my_circles、group_circles四種，每一個是數組，這里以my_circles為例，數組里面有6條商品信息，需要展現出來，看上圖左可以發現，每個圈子的模板都是一樣的，一張圖片加兩行文字說明。模板在此時就發揮了作用，
// 獲取圈子列表 getCircleList(city_id, card_is_mine) { const that = this; circleApi.getCircleList({ data: { city: 2, //city_id }, getToken: true }).then( res => { log('獲取圈子列表01', res) let data = res.data; that.careerCirclr = data.career_circles; if( that.careerCirclr.length === 0 ) { this.prefTipCtrl = false } that.localCirclr = data.local_circles; if( that.localCirclr.length === 0 ) { that.localTipCtrl = false } that.myCircle = (data.group_circles).concat(data.my_circles) ; if( that.myCircle.length != 0) { that.showMyCircle = true; } that.$apply(); }) }
<block wx:if="{{showMyCircle}}"> <view class="subiect">我的相親圈</view> <view class="circleBigBox"> <repeat for="{{myCircle}}" key="index" item="item"> <CircleItemNew @circleDescClick.user = "circleDescClick" :circleImg.sync = "item.image" :circleName.sync = "item.circle_name" :circleDesc.sync = "item.short_desc" > </CircleItemNew> </repeat> </view> </block>
以上代碼中直接遍歷數據 myCircle ,Vue中有 v-for ，微信原生有 wx:for= wepy中采用 <repeat for>，雖然寫法有差異，但思想都是遍歷數據就可以了，不需要操作DOM
組件CircleItemNew：（因為其他的三種圈子也是這個模板，所以抽出來作為模板寫）
<template> <view class="circleItemBox" data-circleId="{{circleId}}" data-circlestate ="{{circleState}}" data-circlegroupId="{{circleGroupId}}" @tap="goCircleIntroduce"> <image class="circleImgNew" mode="aspectFill" src="{{circleImg}}"></image> <view class="circleName">{{circleName}}</view> <view class="circleDesc">{{circleDesc}}</view> </view> </template>
以上模塊若用jq中操作DOM實現，代碼如下:
// 獲取圈子列表 getCircleList(city_id, card_is_mine) { const that = this; circleApi.getCircleList({ data: { city: 2, //city_id }, getToken: true }).then( res => { log('獲取圈子列表01', res) let data = res.data; that.careerCirclr = data.career_circles; if( that.careerCirclr.length === 0 ) { this.prefTipCtrl = false } that.localCirclr = data.local_circles; if( that.localCirclr.length === 0 ) { that.localTipCtrl = false } that.myCircle = (data.group_circles).concat(data.my_circles) ;
$(parentNode).empty() //首先你得把放這個6個圈子的父元素清空，要不下次進來就12個圈子了，在下次進來18個，
$.each(that.myCircle, function(item, index) { //遍歷數組
let circleDiv = '<img src='+ item.image +'></img> //每次遍歷都生成一個HTML模板，再把該模板插入父元素中
<div>'+ item.circle_name +'</div>
<div>'+ item.short_desc +'</div>
'
$(parentNode).append(circleDiv)
})
that.$apply(); }) }
step3：頁面跳轉
3.1Vue中頁面跳轉：
3.1.1可以使用標簽跳轉： <router-link to='two.html'><button>點我到第二個頁面</button></router-link>
3.1.2，點擊事件跳轉
html :
<button @click="hreftwo" class="test-one">點我到第二個頁面</button>
js :
methods:{ //跳轉頁面
hreftwo(){
this.$router.push({ path:'/two.html' })
}
}
3.2普通方法跳轉（jq）
1.我們可以利用http的重定向來跳轉(推薦)
window.location.replace("http://www.jb51.net");
2.使用href來跳轉
window.location.href = "http://www.jb51.net";
3.3微信小程序跳轉：
鏈接： https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html
wx.navigateTo({
url: 'page/home/home?user_id=111'
})
PS： 所有的頁面跳轉都是URL，都可以帶參數，參數以？ 跟在URL后面，多個參數的話，第一個？ 開頭，之后的參數 & 拼接，如代碼：
this.nav('/pages/circleIntroduce?circle_id=' + circle_id + '&group_form_id=' + group_form_id ) //傳統的字符串拼接
wx.navigateTo({
url:`/pages/card?from=inner&user_id=${user_id}&circle_id=${this.circle_id}` //ES6字符串拼接方法
})
頁面調到另一個頁面后，在那個頁面的生命周期函數 onLoad( option ) ，它的參數 option 就拿到了所有傳過來的query 參數。