手把手教你寫一個微信小程序（推薦）

需求

　　小程序語音識別，全景圖片觀看，登陸受權，獲取我的基本信息

一：基礎框架

　　官方開發文檔：https://developers.weixin.qq.com/miniprogram/dev/ （其實官方文檔寫的很清楚了）

1.跟着官方文檔一步一步來，新建一個小程序項目就好

2.而後呢，畢竟默認的只是基本骨架，肌肉線條仍是要本身填的

 app.json 是當前小程序的全局配置

　　小程序的全部頁面路徑、界面表現、網絡超時時間、底部 tab

　　需求一：底部tab，咱們要像原生APP那樣要有是三個常駐的按鈕，切換頁面

在app.json 文件中添加下面的代碼就能夠了

還有哦，必定要配置pagepath（頁面路徑）

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

"tabBar" : {   "color" : "#cacaca" ,   "selectedColor" : "#f40" ,   "borderStyle" : "#fff" ,   "backgroundColor" : "#ffffff" ,   "list" : [    {     "pagePath" : "pages/index/index" ,     "text" : "VR圖片" ,     "iconPath" : "image/home.png" ,     "selectedIconPath" : "image/home_hover.png"    },    {     "pagePath" : "pages/voice/voice" ,     "iconPath" : "image/question.png" ,     "selectedIconPath" : "image/question_hover.png" ,     "text" : "VR語音"    },    {     "pagePath" : "pages/me/me" ,     "iconPath" : "image/mytb.png" ,     "selectedIconPath" : "image/mytb_hover.png" ,     "text" : "你的VR世界"    }   ] }

　　效果圖：

　　需求二：看見別人家的小程序，頂部能夠自定義顏色

　　如圖：

　　好說，好說

一樣在app.json 中插入一下代碼，顏色自定義啦~

?

1 2 3 4 5 6 7

"window" : {    "backgroundTextStyle" : "light" ,    "navigationBarBackgroundColor" : "#458af1" ,    "navigationBarTitleText" : "VR世界" ,    "navigationBarTextStyle" : "black" ,    "enablePullDownRefresh" : true   },

　　總結app.json 配置，直接參考官方文檔中的app.json 全部配置，通常需求均可以知足

　　貼心的貼上官方連接：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

　　需求三：開發小程序，通常要用戶受權登陸，而後獲取用戶的基本信息，我的頁面

　　如圖：

　　

1.官方api 地址：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html

2.找到登陸接口

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

//app.js App({   onLaunch: function () {    // 展現本地存儲能力    var logs = wx.getStorageSync( 'logs' ) || []    logs.unshift(Date.now())    wx.setStorageSync( 'logs' , logs)    // 登陸    wx.login({     success: res => {      // 發送 res.code 到後臺換取 openId, sessionKey, unionId     }    })    // 獲取用戶信息    wx.getSetting({     success: res => {      if (res.authSetting[ 'scope.userInfo' ]) {       // 已經受權，能夠直接調用 getUserInfo 獲取頭像暱稱，不會彈框       wx.getUserInfo({        success: res => {         // 能夠將 res 發送給後臺解碼出 unionId         this .globalData.userInfo = res.userInfo         // 因爲 getUserInfo 是網絡請求，可能會在 Page.onLoad 以後才返回         // 因此此處加入 callback 以防止這種狀況         if ( this .userInfoReadyCallback) {          this .userInfoReadyCallback(res)         }        }       })      }     }    })   },   globalData: {    userInfo: null   } })

　　需求三：小程序有哪些組件可用呢

　　其實小程序的這一套框架，跟vue 很像，上手很容易

1.帖心的放上連接：https://developers.weixin.qq.com/miniprogram/dev/component/
2.官方支持的組件

如何使用，舉栗子，使用swiper 

3.如何使用，舉栗子，使用swiper 輪播

?

1 2 3 4 5 6 7 8

<swiper indicator-dots= "{{indicatorDots}}"   autoplay= "{{autoplay}}" interval= "{{interval}}" duration= "{{duration}}" >   <block wx: for = "{{imgUrls}}" >    <swiper-item>     <image src= "{{item}}" class= "slide-image" width= "355" height= "150" />    </swiper-item>   </block> </swiper>

效果圖：

總結：小程序的接班框架就搭好了，須要什麼就在裏面添加就行了 若是你徹底是新手，不是前端開發者，要先去了解一下

4.要遵循小程序的規則，模板語言，數據綁定，組件使用，傳參，路由這些

5.

 

極客WEB大前端專家級開發工程師培訓視頻學習教程
web前端視頻教程 教學視頻 百度網盤下載（價值700元）110G
nodejs 零基礎入門視頻教程
前端系列視頻教程
html+css+bootstrap課程視頻
《Sass 基礎教程》共40節寧皓網課程
Hello，移動WEB
傳智前端開發
HTML5 學習 視頻教程 教學視頻 百度網盤下載 25G
後盾網全套教程html html5 css3 div+css php js 視頻教程 教學視頻 打包下載 44G
《Web前端開發 - JS基礎入門》共25節課程
web前端培訓 js教程 視頻教程 教學視頻 百度雲網盤下載（價值300元）
【秀野堂】HTML5 CSS3實例標籤頁精解32講
傳智播客web前端14期百度雲在線分享
Web前端教程 html div css從基礎到高級徹底自學教程
達內前端工程師全套 不加密版
輕鬆搞定網頁設計(html+css+javascript)
達內前端 達內WEB前端開發教程完整版
web-前端開發視頻教程入門到精通div+css js jquery
node.js學習視頻+資料（共6套）