（上）小程序從0快速入門到實戰項目打造個性簡歷，面試讓你輕鬆脫穎而出吸引面試官眼球（附源碼）

時間 2020-07-11

標籤程序快速入門實戰項目打造個性簡歷面試讓你輕鬆脫穎而出吸引眼球源碼欄目快樂工作简体版

原文原文鏈接

前言

分享以前咱們先來認識一下小程序，官方定義的微信小程序是一種新的開放能力，開發者能夠快速地開發一個小程序。更是一種全新的鏈接用戶與服務的方式，它能夠在微信內被便捷地獲取和傳播，同時具備出色的使用體驗。那麼我所理解的小程序又是什麼，它有什麼特色，將如何應用？javascript

啥都別說，先上圖直接線上體驗看看效果，拿出手機掃一掃，小程序碼以下：html

若是感受還不錯的話，大大們是否是先賞個點贊鼓勵一哈，感謝對原創做者的支持。下面請接着繼續瀏覽，走起！！！

小程序的簡介

小程序是一種不須要下載安裝便可使用的應用，它實現了應用「觸手可及」的夢想，用戶掃一掃或者搜一下便可打開應用。也體現了「用完即走」的理念，用戶不用關心是否安裝太多應用的問題。應用將無處不在，隨時可用，但又無需安裝卸載。前端

小程序的特色

1. 速度快 無需下載安裝，加載速度快於HTML5，微信登陸，隨時可用java

2. 無需適配 一次開發，多端兼容，免除了對各類手機機型的適配web

3. 社交分享 支持直接或App分享給微信好友和羣聊面試

4. 出色體驗 可達到近乎原生App的操做體驗和流暢度，在離線狀態也可以使用編程

5. 用完即走，隨手可得 經過掃碼、長按、微信搜索、公衆號、好友推薦等方式快速獲取服務，用完即走json

6. 低門檻 已有公衆號的組織可快速註冊、可快速生成門店小程序小程序

小程序的產品優點

	App	普通網頁	小程序
開發成本	高	低	`低`
用戶獲取成本	高	低	`低`
用戶體驗	高	低	`高`
用戶留存	高	低	`高`

小程序不是網頁，也不是App，是一種全新的產品體驗。
微信小程序

小程序的行業應用

智慧零售 線上線下購物（場景賦能）、渠道會員品牌（營銷賦能）、禮物社交銷售（社交賦能）
電商行業 電商平臺、內容電商、品牌電商
生活服務 出行、餐飲、旅遊、共享
政務民生 醫療、稅務、郵政、公安
高校服務 查詢學校線上服務、小程序內領取、查看校園卡、經過小程序進出圖書館、食堂支付
小遊戲 挑一挑、星途、歡樂鬥地主、歡樂麻將

小程序的技術發展

小程序的通訊模型

首先，咱們來簡單瞭解下小程序的運行環境。小程序的運行環境分紅渲染層和邏輯層，其中 WXML 模板和 WXSS 樣式工做在渲染層，JS 腳本工做在邏輯層。

小程序的渲染層和邏輯層分別由2個線程管理：渲染層的界面使用了WebView 進行渲染；邏輯層採用JsCore線程運行JS腳本。一個小程序存在多個界面，因此渲染層存在多個WebView線程，這兩個線程的通訊會經由微信客戶端（下文中也會採用Native來代指微信客戶端）作中轉，邏輯層發送網絡請求也經由Native轉發，小程序的通訊模型以下圖所示。

小程序的程序語言

渲染層：WXML模板 + WXSS樣式（相似HTML+CSS）
邏輯層：JavaScript腳本邏輯交互
配置項：JSON是一種數據格式，並非編程語言，在小程序中，JSON扮演的靜態配置的角色。

小程序的開發流程

1）註冊我的帳號（申請AppID）

開發小程序的第一步，須要擁有一個小程序 AppID，後續的全部開發流程會基於這個 AppID 來完成。小程序的註冊很是簡單，只需幾個操做。打開微信公衆號平臺官網：mp.weixin.qq.com/點擊當即註冊按鈕，在打開的頁面中選擇小程序後，填入相關的信息，就能夠完成註冊了。以下圖：

注意：每一個郵箱只能申請一個小程序

註冊主體類型選擇（我的）

2）完善小程序基本信息

註冊成功後，進入小程序發佈流程，點擊編輯完善基本信息填寫，以下圖：

再點擊「開發」—「開發設置」就能夠看到小程序的 AppID，以下圖：

3）下載安裝微信開發者工具

工具下載地址：developers.weixin.qq.com/miniprogram…

根據本身的操做系統下載對應的安裝包進行安裝（推薦穩定版）。須要注意的是，小程序開發工具在 Windows上僅支持 Windows 7 及以上版，在 Mac 上支持 OS X 10.8 及以上版本。以下圖：

根據工具提示點擊下一步，完成安裝，安裝成功後，能夠在桌面或者開始菜單中找到小程序開發工具的快捷方式，打開便可。

打開小程序開發工具，使用以前註冊小程序所使用的微信掃碼登陸。選擇小程序項目，以下圖：

首先在操做系統建立一個目錄，然後在開發者工具中點擊新建項目，選擇剛建立的目錄，填入 AppID，而後點選 "不使用雲服務"，點擊新建，那麼第一個小程序項目就建立成功了。以下圖：

點擊「開發者工具」工具欄上的預覽按鈕，使用微信掃描生成的二維碼，就能夠看到這個小程序在手機端上的表現了，以下圖：

以上工做一切準備就緒後，就能夠爲所欲爲，盡情的自由發揮。學習方法的訣竅就是多敲代碼，多練習，多看小程序官方文檔。從一個個實戰項目需求和問題出發，引出技術知識點。本項目是經過微信小程序開發打造呈現不同的簡歷，讓你輕鬆脫穎而出去吸引更多面試官的關注。先上一波效果圖。

效果截圖

封面圖（啓動頁）

基本信息界面

工做經驗界面

專業技能界面

技術博客界面

文章精選界面

文章詳情界面

項目結構

│  app.js                  // 小程序邏輯 
│  app.json                // 小程序公共配置
│  app.wxss                // 小程序公共樣式表
│  project.config.json     // 項目配置文件
│  sitemap.json            // 頁面收錄配置文件
├─images                   // 公共圖片存放文件夾
├─pages                    // 註冊頁面文件夾
│  ├─about                 // 基本信息頁面
│  │      about.js         // 頁面邏輯
│  │      about.json       // 頁面配置
│  │      about.wxml       // 頁面結構
│  │      about.wxss       // 頁面樣式表
│  │      
│  ├─article               // 文章詳情頁面
│  │      article.js       // 頁面邏輯
│  │      article.json     // 頁面配置
│  │      article.wxml     // 頁面結構
│  │      article.wxss     // 頁面樣式表
│  │      
│  ├─articles              // 文章精選頁面
│  │      articles.js      // 頁面邏輯
│  │      articles.json    // 頁面配置
│  │      articles.wxml    // 頁面結構
│  │      articles.wxss    // 頁面樣式表
│  │      
│  ├─blog                  // 技術博客頁面
│  │      blog.js          // 頁面邏輯
│  │      blog.json        // 頁面配置
│  │      blog.wxml        // 頁面結構
│  │      blog.wxss        // 頁面樣式表
│  │      
│  ├─index                 // 工做經驗頁面
│  │      index.js         // 頁面邏輯
│  │      index.json       // 頁面配置
│  │      index.wxml       // 頁面結構 
│  │      index.wxss       // 頁面樣式表 
│  │      
│  ├─skill                 // 專業技能頁面
│  │      skill.js         // 頁面邏輯
│  │      skill.json       // 頁面配置
│  │      skill.wxml       // 頁面結構
│  │      skill.wxss       // 頁面樣式表
│  │      
│  └─welcome               // 啓動頁
│          welcome.js      // 頁面邏輯 
│          welcome.json    // 頁面配置
│          welcome.wxml    // 頁面結構
│          welcome.wxss    // 頁面樣式表
│          
└─utils                    // 全局工具類文件夾
        icon.wxss          // 公共圖標樣式表 
        main.wxss          // 公共組件樣式表
        util.js            // 全局JS工具類
複製代碼