uni-app開發流程二(項目開發)

用了一個禮拜,將之前的一個小程序項目和另一個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暫未成功...

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章