用了一個禮拜,將之前的一個小程序項目和另一個vueh5項目的核心功能移植到新項目上,到可以正常運行還是走了不少彎路的,下面記錄一下。
1.我先移植到的是小程序項目,在微信開發者工具運行。
這個小程序當時爲了追求頁面效果,用了colorUI樣式ui,在這裏我並不想捨棄,但好在,colorUI團隊爲uni-app開發了一套可用的,兼容多端的樣式ui,在ColorUI-UniApp下載地址 可以下載。
2.早官方demo的uniTestapp項目裏有很多可以拷貝的東西。
在uniTestapp項目-common-uni.css要移過來,在app.vue裏引用;
在uniTestapp項目-template.h5.html要移過來,放在同樣位置,並點擊manifest.json-h5配置修改index.html模板路徑爲template.h5.html;
3.官方推薦的ui框架,能用就用,不能用就該源碼,都是開源可見的,uni-ui下載地址 ;
4.在app.vue和pages下的vue文件裏的生命週期,是和小程序一樣的,如:onLaunch,onShow,onHide
在components下的官方和自己寫的自定義組件裏,生命週期是vue2.0的寫法,如mounted()
另外在頁面和組件裏的template裏,都是vue2.0的寫法,如:
<view style="line-height: 25px;font-size: 15px;">
<view style="padding: 0 20upx;">
<text>{{questionChioces[0].value}}: </text>
<radio-group class="radioGroup" @change="radioCheckedChange1" name="">
<view v-for="(item,index) in questionChioces[2].value" :key="item">
<view v-if="chooseStyle == 1">
<radio :value='item' :checked="originalSelect[0]==item" />
<text> : {{item}}</text>
</view>
</view>
</radio-group>
</view>
5.在package.json的dependencies可以配置你想要插件,如"@dcloudio/uni-ui": "0.0.8",之後再項目地址下npm install即可;
6.像素px可用,如果要轉換upx,只要在manifest.json裏配置下面"transformPx" : true,
//是否轉換項目的px,爲true時將px轉換爲upx,爲false時,px爲傳統的實際像素;
7.將代碼從gitlab拉取之後,npm install安裝依賴,用git add.發現會將node_modules裏也加入Git,
解決方案:在項目地址命令行echo. >.gitignore,會發現新建了一個gitignore.txt文件,打開,添加node_modules,保存,就可以忽略了;
當然了,很多問題還沒有遇到過,畢竟我的這個項目是做題+定時的h5和小程序,沒有像支付那些功能,不過這個功能在官方文檔都有提供,像小程序一樣。
最後,今天試了下app的功能:
打開android的開發者權限和usb調試,鏈接電腦,
點擊運行-運行到手機和模擬器,會監測到你的手機型號,點擊運行,會在你的手機上安裝一個Hbulder,就可以看原生效果了;
ios暫未成功...