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

資訊專欄INFORMATION COLUMN

小程序開發(fā) 第二篇:使用微信小程序開發(fā)者工具、wepy框架初始化項(xiàng)目

HitenDev / 846人閱讀

摘要:上一篇小程序開發(fā)第一篇注冊獲取同步企業(yè)項(xiàng)目數(shù)據(jù)微信小程序開發(fā)者工具下載小程序開發(fā)者工具使用小程序原生開發(fā)直接使用小程序開發(fā)者工具打開項(xiàng)目即可小程序框架開發(fā)首選官方提供類開發(fā)框架,備選。

上一篇:小程序開發(fā) 第一篇:注冊、獲取unionid同步企業(yè)項(xiàng)目數(shù)據(jù)

1.微信小程序開發(fā)者工具

下載:小程序開發(fā)者工具

使用:

小程序原生開發(fā):直接使用小程序開發(fā)者工具打開項(xiàng)目即可

小程序框架開發(fā):首選官方提供類vue.js開發(fā)框架 wepy.js ,備選 mpVue。我們選擇的是 wepy
PS:mpvue尤大大親自點(diǎn)贊,目前github已經(jīng)有10k+ star。無論哪個(gè)框架都是用來方便開發(fā),同時(shí)也都是需要學(xué)習(xí)成本的。大家可以根據(jù)自己項(xiàng)目進(jìn)度自行選擇,下面是一張區(qū)別圖:

2.wepy.js 初始化項(xiàng)目

wepy官方文檔入口

全局安裝或更新WePY命令行工具

        npm install wepy-cli -g

初始化項(xiàng)目

        wepy new myproject
        # 1.7.0之后的版本使用 wepy init standard myproject 初始化項(xiàng)目,使用 wepy list 查看項(xiàng)目模板

切換項(xiàng)目并安裝依賴

        cd myproject

        npm  install

開啟實(shí)時(shí)編譯,官方給出的指令是 wepy build --watch,不習(xí)慣- -,那就在package.json -> scripts 配置一條新命令 "dev": "wepy build --watch", 我們就可以愉快的 npm run dev

        npm run dev

項(xiàng)目目錄結(jié)構(gòu)介紹(wepy官方目錄修改版,沒有太大變動,可以自行修改)

###開發(fā)

###目錄結(jié)構(gòu)
.
├── dist                   小程序運(yùn)行代碼目錄(該目錄由WePY的build指令自動編譯生成,請不要直接修改該目錄下的文件)
├── node_modules           
├── src                    代碼編寫的目錄(該目錄為使用WePY后的開發(fā)目錄)
|   ├── api                接口集合目錄(目前我們使用 Promise 封裝小程序接口,集中設(shè)置登錄緩存、環(huán)境切換, 直接向外暴露方法)
|   ├── components         WePY組件目錄(組件不屬于完整頁面,所以不會有josn配置,不能直接配置小程序)
|   |   ├── com_a.wpy      可復(fù)用的WePY組件a
|   |   └── com_b.wpy      可復(fù)用的WePY組件b
|   ├── images             tabbar圖片存放
|   ├── mixins             可復(fù)用方法抽離庫
|   |   └── test.js        page頁中引入后調(diào)用 mixins = [test], 當(dāng)前page方法優(yōu)先執(zhí)行,混合函數(shù)方法后執(zhí)行,與 vue相反
|   ├── mocks              本地mock數(shù)據(jù)
|   ├── pages              WePY頁面目錄(屬于完整頁面)
|   |   ├── index.wpy      index頁面(經(jīng)build后,會在dist目錄下的pages目錄生成index.js、index.json、index.wxml和index.wxss文件)
|   |   └── other.wpy      other頁面(經(jīng)build后,會在dist目錄下的pages目錄生成other.js、other.json、other.wxml和other.wxss文件)
|   ├── styles             基礎(chǔ)樣式庫
|   |   ├── iconfont       字體圖標(biāo)文件夾
|   |   └── base.css       基礎(chǔ)樣式庫,原子類等。
|   ├── utils              工具函數(shù)庫
|   |   └── util.js        存放第三方工具庫和一些基礎(chǔ)方法,比如日期格式化、文件大小格式化、節(jié)流函數(shù)等
|   └── app.wpy            小程序配置項(xiàng)(全局?jǐn)?shù)據(jù)、樣式、聲明鉤子等;經(jīng)build后,會在dist目錄下生成app.js、app.json和app.wxss文件)
└── package.json           項(xiàng)目的package配置

現(xiàn)在,我們初始化一個(gè)小程序項(xiàng)目,myproject 項(xiàng)目編譯后生成一個(gè) dist 文件夾,這個(gè)文件夾存放變異后的小程序原生代碼。打開小程序開發(fā)者工具選中 dist 文件,填寫 appid、項(xiàng)目名稱(本地開發(fā)名稱隨便填寫,并非小程序真正名稱)。

項(xiàng)目開啟:

框架開發(fā),不需要小程序編輯器。頭像右側(cè)3個(gè)選項(xiàng),關(guān)閉編輯器,打開自己的編輯器,推薦vsCode

查看調(diào)試器 Console,會發(fā)現(xiàn)一堆報(bào)錯,不要慌。 wepy.js v1.7.0之前是沒有 project.config.json 配置小程序開發(fā)工具文件的,需要手動關(guān)閉。點(diǎn)擊開發(fā)者工具右上角 詳情 -> 項(xiàng)目配置

wepy.js v1.7.0之后,初始化項(xiàng)目有配置文件,如圖沒有報(bào)錯了,????乛?乛????完美。

3.真機(jī)調(diào)試

預(yù)覽:項(xiàng)目不能超過2M,點(diǎn)擊小程序開發(fā)者工具 預(yù)覽 按鈕,已添加權(quán)限的開發(fā)者使用微信掃碼,小程序在手機(jī)端打開了。一般開發(fā)環(huán)境接口均為 http , 真機(jī)預(yù)覽會失敗,打開右上角膠囊按鈕菜單 -> 打開調(diào)試 即關(guān)閉了小程序https證書檢測,重新打開小程序即可預(yù)覽。

遠(yuǎn)程調(diào)試:類似預(yù)覽,但是會重新打開一個(gè)控制臺,選擇Wxml,可以看到真機(jī)端有DOM選中,更好的調(diào)試。

小程序開發(fā)注意事項(xiàng)

視圖設(shè)計(jì)官方推薦以 iPhone6 為準(zhǔn)。小程序適配單位為 rpx,設(shè)計(jì)圖為iPhone6是最方便開發(fā)的,量多少寫多少,只是單位用rpx。

小程序預(yù)覽、發(fā)布,都是有大小限制的,最大為2M,寸土寸金。項(xiàng)目中一般圖片最大,設(shè)計(jì)給圖后,首先第一步 壓縮!壓縮!壓縮! 壓縮圖片網(wǎng)站,然后放到靜態(tài)資源管理平臺CDN等,生成網(wǎng)絡(luò)資源。 小程序原生tabbar圖片只支持 png/jpg/jpeg ,只能是本地圖片。

iconfont使用,這個(gè)就比較坑了,小程序支持iconfont,本地模擬器也是沒問題的,但是真機(jī)就尷尬了,真機(jī)不識別*tff字體圖標(biāo)文件,只支持Base64格式,所以我們的 *tff文件需要轉(zhuǎn)碼( https://transfonter.org/ )使用方法:

轉(zhuǎn)碼成功后替換 iconfont.css 內(nèi) @font-face下src 內(nèi)容即可,當(dāng)然這里也有坑,base64后 icon 沒有顏色了,所以單色值icon可以用 iconfont, 色彩比較多的icon還是用壓縮后的網(wǎng)絡(luò)圖片吧

PS:有坑一起填,有發(fā)現(xiàn)新坑,或者寫的不對的地方請指正

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

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

相關(guān)文章

  • 小程開發(fā) 第一篇:注冊、獲取unionid同步企業(yè)項(xiàng)目數(shù)據(jù)

    摘要:如何注冊一個(gè)小程序注冊在微信公眾平臺注冊一個(gè)企業(yè)類型小程序。總結(jié)項(xiàng)目依托于微信平臺,并且要實(shí)現(xiàn)數(shù)據(jù)互通,面向已有用戶,才需要小程序注冊企業(yè)類型,按需申請。小程序開發(fā)第二篇使用微信小程序開發(fā)者工具框架初始化項(xiàng)目 1.如何注冊一個(gè)小程序? 注冊:在微信公眾平臺 注冊一個(gè)企業(yè)類型小程序。只有認(rèn)證過企業(yè)類型的小程序才有資格關(guān)聯(lián)項(xiàng)目系統(tǒng)。 showImg(https://segmentfaul...

    Andrman 評論0 收藏0
  • 微信小程資源匯總

    awesome-github-wechat-weapp 是由OpenDigg整理并維護(hù)的微信小程序開源項(xiàng)目庫集合。我們會定期同步上的項(xiàng)目到這里,也歡迎各位 UI組件開發(fā)框架實(shí)用庫開發(fā)工具服務(wù)端項(xiàng)目實(shí)例Demo UI組件 weui-wxss ★1873 - 同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫zanui-weapp ★794 - 好用易擴(kuò)展的小程序 UI 庫wx-charts ★449 - 微信小程...

    Olivia 評論0 收藏0

發(fā)表評論

0條評論

HitenDev

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<