小程序開(kāi)發(fā)

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

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

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

Node.js LTS版本

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

git 最新版

文檔:

本項(xiàng)目技術(shù)?；?/p>

ES2016

VueJS

mpvue

微信小程序

快速開(kāi)始

1.克隆項(xiàng)目

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

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

    cd met_wx
    
3.安裝依賴

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

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

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

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

頁(yè)面路由 全局配置

首先，我們看一下項(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: {
        // 頁(yè)面前帶有 ^ 符號(hào)的，會(huì)被編譯成首頁(yè)，其他頁(yè)面可以選填，我們會(huì)自動(dòng)把 webpack entry 里面的入口頁(yè)面加進(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: "首頁(yè)",
                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: "簡(jiǎn)介",
                iconPath: "assets/about.png",
                selectedIconPath: "assets/about-active.png"
            }]
        },
        networkTimeout: {
            request: 10000,
            downloadFile: 10000
        },
    }
}

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

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

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

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

新增頁(yè)面

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

新增了頁(yè)面pages/abc

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

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

頁(yè)面跳轉(zhuǎn)

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

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

樣式

樣式編寫采用了 Scss

全局樣式

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

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

頁(yè)面樣式

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

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

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

組件

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

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

組件新建與引入 vue 組件

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

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

3.在字符串模版中使用

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

小程序組件

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

示例代碼：


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

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

由于微信的限制，小程序發(fā)起請(qǐng)求必須通過(guò) 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.在其他地方通過(guò)this.$post`調(diào)用，如：
this.$post("getUserinfo",data)

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108134.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

ghnor

男|高級(jí)講師

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

TA的文章

keras和tensorflow

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

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

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

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

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

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

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

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

小程序開(kāi)發(fā)

相關(guān)文章

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

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

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

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

發(fā)表評(píng)論

0條評(píng)論

ghnor

男|高級(jí)講師

TA的文章

keras和tensorflow

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

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

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

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

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

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

feeds流中的圖片

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

小程序開(kāi)發(fā)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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