整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
作經(jīng)歷（案例一）
工作時間：2017-03 - 至今
公司名稱：【七分簡歷】人才咨詢有限公司 | 所在部門： | 所在崗位：前端開發(fā)工程師
工作描述：
贏額外我是一家專注中小企業(yè)快消品培訓(xùn)、營銷、微營銷、電商的網(wǎng)站。該網(wǎng)站主要分首頁、營銷力介紹、咨詢、培訓(xùn)、年會、獵頭、公司新聞、客戶留言、加入我們模塊組成。
1、根據(jù)設(shè)計圖與UI及相關(guān)人員溝通，了解項(xiàng)目需求
2、負(fù)責(zé)首頁、贏銷力介紹、公司新聞和客戶留言模塊的網(wǎng)頁制作。
3、解決在各主瀏覽器的兼容性，并利用jQuery和CSS3技術(shù)實(shí)現(xiàn)頁面上的動畫效果。
4、通過JavaScript面向?qū)ο笏枷敕庋b一個Tap欄切換組件，完成各頁面中的Tap欄切換效果。
5、公司新聞模塊中數(shù)據(jù)通過利用Ajax進(jìn)行數(shù)據(jù)交互的處理和渲染，使用jQuery第三方框架實(shí)現(xiàn)分頁效果。
6、在公司新聞模塊中使用artTemplate模板引擎向頁面中渲染數(shù)據(jù)，提高開發(fā)效率。
7、與后端人員配合完成接口的調(diào)用。
工作經(jīng)歷（案例二）
工作時間：2016-07 - 至今
公司名稱：【七分簡歷】網(wǎng)絡(luò)技術(shù)有限公司 | 所在部門： | 所在崗位：web前端開發(fā)工程師
工作描述：
在公司主要負(fù)責(zé)靜態(tài)頁面的制作，及合接口實(shí)現(xiàn)前后臺之間的數(shù)據(jù)交互
所做項(xiàng)目：
1、快評外賣（前臺）
2、藝學(xué)就慧新春文常競賽（前臺）
3、藝學(xué)就慧（后臺，包括：題庫、測評、用戶、班級模塊）
4、微感在線測評小程序
5、超紅星主播大賽（前后臺）
6、智慧工程安全施工三級預(yù)警平臺（前后臺）
項(xiàng)目主要的技術(shù)：
Vue.js、Jquery、JavaScript、WXML、HTML、CSS
簡述在項(xiàng)目中職責(zé)：
（1）、明確需求，根據(jù)設(shè)計圖，對照需求整理各頁面、各功能之間的邏輯關(guān)系。整理完成后，再瀏覽所有的設(shè)計圖，尋找出公共的通用的部分，作為統(tǒng)一樣式提煉出來，使用HTML、CSS對頁面進(jìn)行整體布局設(shè)計，并使用jQuery、JavaScript做一些交互動效，實(shí)現(xiàn)靜態(tài)頁面的制作。
（2）、根據(jù)后臺API接口文檔，利用jQuery、Vue.js，調(diào)接口實(shí)現(xiàn)各頁面數(shù)據(jù)渲染及前后臺數(shù)據(jù)交互，在此過程中根據(jù)情況，對公共一致的功能，進(jìn)行提煉封裝。
（3）、項(xiàng)目開發(fā)完成后進(jìn)行整體測試，確保項(xiàng)目滿足需求
工作經(jīng)歷（案例三）
工作時間：2015-12 - 2017-01
公司名稱：【七分簡歷】信息技術(shù)有限公司 | 所在部門： | 所在崗位：WEB前端開發(fā)
工作描述：
（1）負(fù)責(zé)公司醫(yī)療項(xiàng)目前端開發(fā)、優(yōu)化以及動態(tài)效果實(shí)現(xiàn)；
（2）根據(jù)設(shè)計效果圖，進(jìn)行頁面切片及制作；
（3）優(yōu)化代碼并負(fù)責(zé)項(xiàng)目頁面在不同瀏覽器下的兼容性調(diào)試和修改；
（4）對現(xiàn)有項(xiàng)目頁面進(jìn)行規(guī)范性優(yōu)化，改善用戶體驗(yàn)，以及各項(xiàng)性能的調(diào)優(yōu)等。
（5）仿京東商城:首頁,登錄頁,注冊頁,購物車。
工作經(jīng)歷（案例四）
工作時間：2016-07 - 2017-07
公司名稱：【七分簡歷】網(wǎng)絡(luò)科技有限公司 | 所在部門： | 所在崗位：前端開發(fā)工程師
工作描述：
1. 與設(shè)計師和產(chǎn)品經(jīng)理緊密合作，快速的把設(shè)計稿轉(zhuǎn)化成web靜態(tài)頁面；
2. 利用jQuery完成前端交互，利用Ajax異步請求完成前后臺數(shù)據(jù)交互；
3. 對程序進(jìn)行代碼的優(yōu)化、BUG修復(fù)、瀏覽器兼容性調(diào)優(yōu)；
4. 利用前沿技術(shù)，將最新的技術(shù)運(yùn)用到產(chǎn)品中,同時確保在不同平臺、設(shè)備、瀏覽器上均擁有良好的兼容性和優(yōu)質(zhì)的用戶體驗(yàn)。
發(fā)一個小程序并不難。我的門檻太低了本質(zhì)上是開發(fā)另一個前端平臺，如主頁、手機(jī)軟件，但它是在WeChat定義的框架內(nèi)完成的，有一些WeChat特有的功能，例如獲取和登錄用戶的基本信息；與麥克風(fēng)群共享等。WeChat提供了非常詳細(xì)的文檔，在網(wǎng)絡(luò)上也可以使用很多組件，整體上比Web網(wǎng)頁和手機(jī)軟件的開發(fā)簡單，大大降低了知道技術(shù)的人有想法、想要嘗試的難度。
為了開發(fā)小程序，首先需要了解微信中的小程序如何工作，生命周期是怎樣的，以及頁面的加載和路由等。試試看
有兩種開發(fā)模式：簡單型和多樣型。
簡單型開發(fā)
像字面的意思一樣，在比較簡單、直接的開發(fā)方式中，沒有復(fù)雜功能。
每一個小程序的頁面，都由 4 個文件協(xié)同以完成功能：
.像wxml文件，html一樣，該文件主要用于構(gòu)建頁面的結(jié)構(gòu)，包括哪些組件，如何相互關(guān)聯(lián)？例如，包含按鈕。
像.wxss文件，css那樣，這個文件是為了記述頁面表示的模式，決定了wxml內(nèi)的組件和構(gòu)造是如何表示的。例如，按鈕是什么顏色，.js文件和Web頁面開發(fā)的js有用，點(diǎn)擊按鈕會發(fā)生什么等，用于處理事件的.json文件，幾個窗口小部件特有的內(nèi)容的表示，例如定義了各頁面的名稱。除此之外，app.js和app.json處理整個窗口小部件的一些配置和事件。
簡單型開發(fā)是有問題的，每次開發(fā)一個頁面時，都要創(chuàng)建這四個文件，在這幾個文件之間切換更改是很麻煩的。例如，要修改一個按鈕，首先去wxml調(diào)整頁面的結(jié)構(gòu)位置，去wxss調(diào)整顏色，然后修正js后點(diǎn)擊會發(fā)生什么。1個網(wǎng)頁還可以，但是網(wǎng)頁多的話，文件超多，很麻煩，所以豪華式有用的地方。
多樣型開發(fā)
weepy是微信開發(fā)的一個小型程序開發(fā)框架，它很大程度上解決了簡單性的問題，并具有其他一些優(yōu)點(diǎn)：
Wepy參考Vue，所以在開發(fā)模型中基本上與Vue相同。每個頁面都需要一個定義。wpy文件、Vue的第1頁、html、css、js均在此文件中，簡化了開發(fā)。開發(fā)后，Wepy使用wpy文件自動生成每頁的樸素的4頁。面。Wepy便于開發(fā)應(yīng)用程序。
對于一個基于Vue或React的朋友，基本上可以無縫地工作。開發(fā)效率也比樸素的快得多。
在學(xué)習(xí)的過程中，用Wepy模仿他人的實(shí)現(xiàn)，簡單地實(shí)現(xiàn)了一個服裝的商城fashion-mall，配備了可以在本地運(yùn)行的測試后端。有興趣的朋友可以參考Github。小應(yīng)用程序大幅度地削減了應(yīng)用程序的開發(fā)和維護(hù)的成本，將想法的試行錯誤控制在最小限度。
Kcamp官網(wǎng)：http://www.ikcamp.com
訪問官網(wǎng)更快閱讀全部免費(fèi)分享課程：《iKcamp出品｜全網(wǎng)最新｜微信小程序｜基于最新版1.0開發(fā)者工具之初中級培訓(xùn)教程分享》。
包含：文章、視頻、源代碼
在上一節(jié)第 8 步所展示的頁面中，可以點(diǎn)擊 開發(fā)者工具 直接進(jìn)入到下載頁面，也可以直接訪問 官網(wǎng)下載地址。然后根據(jù)自己的設(shè)備選擇相應(yīng)的下載
安裝過程不再復(fù)述，一路默認(rèn)。
此教程選擇的工具為 mac 平臺版本，沒差
打開安裝好的 微信web開發(fā)者工具 ，需要用 管理員 或 開發(fā)者 的微信賬號掃碼登錄。管理員賬號 是上一節(jié)第 6 步中注冊 appID 時，綁定的微信賬號。開發(fā)者賬號可在上一節(jié)第 8 步中的 添加開發(fā)者 中設(shè)置
https://open.weixin.qq.com/connect/confirm?uuid=081r6FgN2rYhalnT (二維碼自動識別)
２. 登錄成功后，選擇 本地小程序項(xiàng)目，然后 添加項(xiàng)目
3. 如果沒有注冊 appID，也可以開發(fā)小程序項(xiàng)目，但部分功能會受限，比如在手機(jī)上預(yù)覽。在這里，我們已經(jīng)有了 appID
4. 添加成功后，我們的項(xiàng)目會在 微信web開發(fā)者工具 中自動打開并啟動，可以在此工具中對代碼進(jìn)行修改、調(diào)試、斷點(diǎn)、預(yù)覽，文件有修改的話，項(xiàng)目會實(shí)時更新。
項(xiàng)目生成后，會看到如下結(jié)構(gòu)的目錄文件：
├─ pages/ │ ├─ index/ │ ├─ index.js │ ├─ index.wxml │ ├─ index.wxss │ ├─ logs/ │ ├─ logs.js │ ├─ logs.json │ ├─ logs.wxml │ ├─ logs.wxss ├── utils/ │ ├─ util.js ├── app.js // 必備文件 ├── app.json // 必備文件 ├── app.wxss
先看下最外層的三個文件：app.js 、 app.json 、 app.wxss
app.js
小程序的主入口文件，類似于我們在模塊加載器時代（requirejs/seajs）常常會碼一個 main.js 來作為程序的啟動入口。如果你有接觸過 node - express 技術(shù)棧，理解起來會更貼切。注意：<span style="color:red">文件名不可更改</span>
我們可以在 app.js 里面對小程序在不同生命周期段進(jìn)行處理，設(shè)置小程序里面的 全局變量（比如只請求一次公用的數(shù)據(jù)，讓所有的頁面都能用）。 微信平臺 app.js 說明文檔
2. app.json
小程序的全局配置文件，比如設(shè)置小程序有哪幾個頁面組成（目前是 index和 logs）、窗口表現(xiàn)（背景色等）、設(shè)置網(wǎng)絡(luò)超時時間、設(shè)置導(dǎo)航條樣式等背景色。注意：<span style="color:red">該文件不可添加任何注釋內(nèi)容</span>
微信平臺 app.json 配置文檔
3. app.wxss
小程序的全局樣式文件，在小程序中，所有的樣式文件不再是 .css 后綴，全都需要以 .wxss 作為后綴。與傳統(tǒng)的 css 樣式相比，wxss 支持 @import樣式導(dǎo)入和像素單位自適應(yīng)。
獨(dú)立頁面中的局部樣式，請書寫在相對的頁面文件夾中，后面會有說明。 微信平臺 app.wxss 樣式說明文檔
app.json 文件中配置了當(dāng)前小程序的兩個頁面 pages/index/index 和 pages/logs/logs，可以看到，其實(shí)就是 文件的路徑+文件名 組成。如果增加一個頁面，需要在參數(shù) pages 中把頁面的地址配置進(jìn)去。
細(xì)心的同學(xué)可能已經(jīng)發(fā)現(xiàn)一個現(xiàn)象，每個頁面文件夾，與里面的文件，名字都一樣一樣滴。是的，一般情況下，一個完整的頁面需要 js 、wxss(css)、wxml(html)組成。
比如 index 頁面，如果需要對 index 頁面進(jìn)行一些獨(dú)立的配置，需要像 logs 一樣，增加 index.json 文件來保存配置信息。
來看下 wxml 文件與 html 文件的區(qū)別
<!--index.wxml--><view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view></view>傳統(tǒng)的 html 文件由各種各樣的標(biāo)簽組成，而在 wxml 中，可用的標(biāo)簽元素并不多，可以看到這里涉及到了 view、image、text標(biāo)簽。
view 相當(dāng)于 div，你可以這么去理解。
image 相當(dāng)于 img，這個應(yīng)該都懂了。
text 很明顯，用來標(biāo)注文本的標(biāo)簽，既然是 文本，肯定是 行級元素 了。
還有一些內(nèi)置好的組件標(biāo)簽，自帶樣式和特性，詳見 官方文檔
作用域只在當(dāng)前頁面生效，它可以覆蓋 app.wxss 里面的樣式規(guī)則?？梢钥吹?，與平時我們用的樣式文件基本沒差：
/**index.wxss**/.userinfo {
display: flex;
flex-direction: column;
align-items: center;}.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;}.userinfo-nickname {
color: #aaa;}.usermotto {
margin-top: 200px;}跟 app.js 一樣，包含了一個頁面的生命周期，聲明并處理數(shù)據(jù)，響應(yīng)頁面交互事件等。
//index.js//獲取應(yīng)用實(shí)例const app = getApp()Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
//事件處理函數(shù)
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
// 由于 getUserInfo 是網(wǎng)絡(luò)請求，可能會在 Page.onLoad 之后才返回
// 所以此處加入 callback 以防止這種情況
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在沒有 open-type=getUserInfo 版本的兼容處理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}})下期更新內(nèi)容：小程序初級入門教程－小試牛刀+發(fā)布流程
iKcamp原創(chuàng)新書《移動Web前端高效開發(fā)實(shí)戰(zhàn)》已在亞馬遜、京東、當(dāng)當(dāng)開售。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
