小程序開發(fā)

ghnor 發(fā)布于2019-08-26 12:10 / 1170人閱讀

摘要：開發(fā)前準(zhǔn)備環(huán)境版本微信開發(fā)工具最新版最新版文檔本項(xiàng)目技術(shù)?；谖⑿判〕绦蚩焖匍_始克隆項(xiàng)目進(jìn)入項(xiàng)目安裝依賴啟動構(gòu)建打開微信開發(fā)工具，導(dǎo)入項(xiàng)目目錄結(jié)構(gòu)構(gòu)建相關(guān)配置相關(guān)打包相關(guān)第三方模塊源代碼全局公用方法所有頁面文件業(yè)務(wù)組件圖片字體等靜態(tài)資源業(yè)務(wù)

開發(fā)前準(zhǔn)備 環(huán)境:

Node.js LTS版本

微信Web開發(fā)工具最新版

git 最新版

文檔:

本項(xiàng)目技術(shù)棧基于

ES2016

VueJS

mpvue

微信小程序

快速開始

1.克隆項(xiàng)目

    git clone https://gitee.com/Fntys/met_wx.git

2.進(jìn)入項(xiàng)目

    cd met_wx
    
3.安裝依賴

    npm install
    
4.啟動構(gòu)建

    npm run dev
    
5.打開微信Web開發(fā)工具，導(dǎo)入項(xiàng)目

目錄結(jié)構(gòu)

├── build                       //  構(gòu)建相關(guān)
├── config                      //  配置相關(guān)
├── dist                        //  打包相關(guān)
├── node_modules                //  第三方模塊
├── src                         //  源代碼
│   ├── utils                   //  全局公用方法
│   ├── pages                   //  所有頁面文件 
│   ├── components              //  業(yè)務(wù)組件 
│   ├── assets                  //  圖片 字體等靜態(tài)資源
│   ├── components              //  業(yè)務(wù)組件 
│   ├── styles                  //  公共樣式文件 
│   ├── main.js                 //  入口文件 加載組件 初始化等
│   ├── App.vue                 //  入口頁面 
├── static                      //  第三方不打包資源
├── .babelrc                    //  babel-loader 配置
├── .eslintrc.js                //  eslint 配置項(xiàng)
├── .postcssrc.js               //  后處理器
├── .gitignore                  //  git 忽略項(xiàng)
├── index.html                  //  html模板
└── package.json                //  package.json

頁面路由 全局配置

首先，我們看一下項(xiàng)目的配置文件 /src/main.js 里面的初始內(nèi)容如下：

import Vue from "vue"
import App from "./App"
import "./styles/index.scss"
import {post} from "./utils/request.js"
Vue.prototype.$post = post
Vue.config.productionTip = false
App.mpType = "app"
const app = new Vue(App)
app.$mount()

export default {
    // 這個(gè)字段走 app.json
    config: {
        // 頁面前帶有 ^ 符號的，會被編譯成首頁，其他頁面可以選填，我們會自動把 webpack entry 里面的入口頁面加進(jìn)去
        pages: ["pages/about/main", "^pages/index/main", "pages/product/main", "pages/news/main","pages/shownews/main","pages/showproduct/main"],
        window: {
            backgroundTextStyle: "light",
            navigationBarBackgroundColor: "#fff",
            navigationBarTitleText: "米拓官網(wǎng)",
            navigationBarTextStyle: "black"
        },
        tabBar: {
            list: [{
                pagePath: "pages/index/main",
                text: "首頁",
                iconPath: "assets/home.png",
                selectedIconPath: "assets/home-active.png"
            }, {
                pagePath: "pages/product/main",
                text: "產(chǎn)品",
                iconPath: "assets/product.png",
                selectedIconPath: "assets/product-active.png"
            }, {
                pagePath: "pages/news/main",
                text: "新聞",
                iconPath: "assets/news.png",
                selectedIconPath: "assets/news-active.png"
            }, {
                pagePath: "pages/about/main",
                text: "簡介",
                iconPath: "assets/about.png",
                selectedIconPath: "assets/about-active.png"
            }]
        },
        networkTimeout: {
            request: 10000,
            downloadFile: 10000
        },
    }
}

這里的 config 字段下面的內(nèi)容，就是整個(gè)小程序的全局配置了，其中pages是頁面的路由，window則是頁面的一些配置（大部分都是頂部欄的配置），這些配置，最終都會被打包到原生小程序的app.json，對這些配置不了解的，建議看一下微信方法的小程序文檔，這里不做贅述。

頁面配置 頁面結(jié)構(gòu)

本項(xiàng)目共有6個(gè)頁面，分別為：

├── pages                            // 頁面文件
│   ├── about                        //  簡介頁  
│   ├── index                        //  首頁
│   ├── news                         //  新聞列表頁
│   ├── product                      //  產(chǎn)品列表頁
│   ├── shownews                     //  新聞詳情頁
│   ├── showproduct                  //  產(chǎn)品詳情頁

新增頁面

復(fù)制任意/pages/下的文件夾，重命名，在/src/main.js的config.pages字段里添加你新增的頁面路徑，如：

新增了頁面pages/abc

然后在/src/main.js下的config.pages字段中新增"pages/abc/main"

Tips ： 新增頁面文件夾里必須包含main.js，新增完頁面后重啟運(yùn)行npm run dev

頁面跳轉(zhuǎn)

用小程序原生的 navigator 組件，比如我們想從列表頁跳到詳情頁面：，只需在url處填寫詳情頁面main.js相對于當(dāng)前頁面的路徑即可。

元素綁定tap事件，執(zhí)行 wx.navigateTo 方法。

樣式

樣式編寫采用了 Scss

全局樣式

全局樣式文件存放于/src/styles/中
在/src/main.js中通過import "./styles/index.scss"被全局引入

├── styles                             //  公共樣式文件 
│   ├── common.scss                    //  公共樣式 
│   ├── index.scss                     //  全局樣式 
│   ├── mixin.scss                     //  混合器 
│   ├── varable.scss                   //  變量

頁面樣式

由于頁面大多是由組件組成，所以一個(gè)頁面的樣式被分散到各個(gè)組件。如：
src/components/IndexAbout.vue中的

影響了index頁面的about區(qū)塊的樣式。
其中lang="scss"規(guī)定編譯器按照何種語法來解釋css語言，這里我們是用的scss。
scoped表示它的樣式作用于當(dāng)下的模塊，很好的實(shí)現(xiàn)了樣式私有化的目的，這是一個(gè)非常好的機(jī)制。

Tips ： 對于高復(fù)用的公共組件謹(jǐn)慎使用scoped屬性

組件

前面我們說到頁面大多都是組件組成，在src/components/下存放了項(xiàng)目所有組件。

├── components                           //  全部組件 
│   ├── index                            //  首頁組件 
│   │   ├──IndexAbout.vue                //  簡介
│   │   ├──IndexNews.vue                 //  新聞 
│   │   ├──IndexProduct.vue              //  產(chǎn)品 
│   │   ├──IndexService.vue              //  服務(wù) 
│   ├── inside                           //  內(nèi)頁組件 
│   │   ├──News.vue                      //  新聞列表
│   │   ├──Product.vue                   //  產(chǎn)品列表 
│   │   ├──ShowNews.vue                  //  新聞詳情頁 
│   │   ├──ShowProduct.vue               //  產(chǎn)品詳情頁 
│   ├── common                           //  公共組件 
│   │   ├──Banner.vue                    //  輪播圖 
│   │   ├──Sidebar.vue                   //  側(cè)邊欄
│   │   ├──SubcolumnNav.vue              //  二級欄目導(dǎo)航

組件新建與引入 vue 組件

由于mpvue只能使用單文件組件（.vue 組件）的形式進(jìn)行支持，所以我們只能新建單文件的組件。
1.新建文件，命名采用 PascalCase (駝峰式命名)，如：HelloWorld.vue，
2.在頁面引入你的組件：

import HelloWorld from "@/components/xxx/HelloWorld"`  //引入組件
components: {
        HelloWorld                                     //組件注冊
  }

3.在字符串模版中使用

Tips ： @是webpack的alias，指向src，目的是讓后續(xù)引用的地方減少路徑的復(fù)雜度

小程序組件

mpvue 可以支持小程序的原生組件，比如： picker,map 等，需要注意的是原生組件上的事件綁定，需要以 vue 的事件綁定語法來綁定，如 bindchange="eventName" 事件，需要寫成 @change="eventName"

示例代碼：


    
      當(dāng)前選擇: {{date}}

網(wǎng)絡(luò)請求

由于微信的限制，小程序發(fā)起請求必須通過 wx.request 方法，這里我們進(jìn)行了Promise的封裝。
1.新建request.js

let serverPath = "http://www.abc.com/api/"
export function post(url,body) {
    return new Promise((resolve,reject) => {
        wx.request({
              url: serverPath + url,    // 拼接完整的url
              data: body,
              method:"POST",
              header: {
                  "content-type": "application/json"
              },
              success(res) {
                resolve(res.data)  // 把返回的數(shù)據(jù)傳出去
              },
              fail(ret) {
                reject(ret)   // 把錯(cuò)誤信息傳出去
              }
            })
    })
}

2.在src/main.js中全局引入，并掛在到Vue原型上。

import {post} from "./utils/request.js"
Vue.prototype.$post = post

3.在其他地方通過this.$post`調(diào)用，如：
this.$post("getUserinfo",data)

GPU云服務(wù)器云服務(wù)器小程序開發(fā)開發(fā) 小程序開發(fā) 小程序開發(fā)開發(fā)制作福州小程序開發(fā)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/108134.html

發(fā)表評論

登陸后可評論

0條評論

ghnor

男|高級講師

我要關(guān)注我要私信

TA的文章

keras和tensorflow

閱讀 1438·2023-04-25 16:31
#圣誕節(jié)#SugarHosts：糖果主機(jī)促銷，美國/香港虛擬主機(jī)低至6折，云服務(wù)器每續(xù)費(fèi)一年贈送半年

閱讀 2040·2021-11-24 10:33
V5.NET：九月韓國物理服務(wù)器7折月付436元起

閱讀 2745·2021-09-23 11:33
Hostwinds：美國/荷蘭vps;機(jī)房托管套餐月付$8刀起;非托管月付$5刀起

閱讀 2528·2021-09-23 11:31
人生重開模擬器「GitHub 熱點(diǎn)速覽 v.21.36」

閱讀 2900·2021-09-08 09:45
C語言進(jìn)階第一問：數(shù)據(jù)在內(nèi)存中是如何存儲的？（手把手帶你深度剖析數(shù)據(jù)在內(nèi)卒中的存儲，超全解析，碼住不

閱讀 2336·2021-09-06 15:02
Codepen 每日精選（2018-4-3）

閱讀 2647·2019-08-30 14:21
feeds流中的圖片

閱讀 2313·2019-08-30 12:56

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

小程序開發(fā)

相關(guān)文章

**前端資源系列（3）-微信小程序開發(fā)資源匯總**

**微信小程序開發(fā)由0到1開發(fā),快速開發(fā)上線**

**微信小程序開發(fā)由0到1開發(fā),快速開發(fā)上線**

**微信小程序開發(fā)由0到1開發(fā),快速開發(fā)上線**

發(fā)表評論

0條評論

ghnor

男|高級講師

TA的文章

keras和tensorflow

#圣誕節(jié)#SugarHosts：糖果主機(jī)促銷，美國/香港虛擬主機(jī)低至6折，云服務(wù)器每續(xù)費(fèi)一年贈送半年

V5.NET：九月韓國物理服務(wù)器7折月付436元起

Hostwinds：美國/荷蘭vps;機(jī)房托管套餐月付$8刀起;非托管月付$5刀起

人生重開模擬器「GitHub 熱點(diǎn)速覽 v.21.36」

C語言進(jìn)階第一問：數(shù)據(jù)在內(nèi)存中是如何存儲的？（手把手帶你深度剖析數(shù)據(jù)在內(nèi)卒中的存儲，超全解析，碼住不

Codepen 每日精選（2018-4-3）

feeds流中的圖片

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

小程序開發(fā)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！