0.前言
人都對未知都有本能的恐懼心理,有些人恐懼并興奮著,好奇著
其實對于大多數(shù)未知,都是一張紙,捅破了,也就那樣,不過如此
現(xiàn)在看了uni-app會了,不過如此,就不想寫文章了,覺得low,
但是我的初心本就是和大家一起學習,所有還是簡單寫一下,希望能幫助有緣人
其實文檔寫的已經很清楚了,但很多人就是由于內心的恐懼,種種借口,寧愿網上搜文章,也不看官網的文檔
還是希望一起克服這個心理,多看看官方文檔,賣出第一步
準備工作
HbuilderX確實功能強大,為國爭光哈哈 ,為數(shù)不多的國產流行開發(fā)工具
what uni-app
其實以前我對
uni-app的理解是偏面的錯誤的,所有這里在解釋下
uni-app是一個使用 Vue.js 開發(fā)所有前端應用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響應式）、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應用等多個平臺
重點vue前端框架發(fā)布多個平臺
1. 新建uni-app項目 一路默認
1.png
2. 結構分析
1.png
pages.json配置啟動頁 等信息
3. 運行 pages/index 在網頁
1.png
4. 修改 pages/index data數(shù)據(jù)查看界面 效果
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<input type="text" v-model="title" />
export default {
data() {
return {
title: 'Hello-app'
}
}
}
vue雙向綁定也一樣使用
5. 打包 發(fā)行 web或手機H5
點擊發(fā)行
1.png
6. 點擊發(fā)行,查看控制臺打包進度
1.png
打包進度 ,打包后的文件目錄
1.png
7. 把打包后的東西部署到服務器就完成了發(fā)行工作
8. 插件安裝
hbuilder 有強大的插件市場
自己也可以編寫插件 ,別人使用的時候可以付費購買,也可以免費分享
1.png
顯示 已安裝的 ,還有核心插件 ,還可以去插件市場安裝
1.png
以less舉例
1.png
點擊 使用HbuilderX 導入插件
注意
這里沒有賬號的 注冊個賬號就行了
1.png
9. pages/index 使用less
新建less文件
pages/index/index.vue 引入 使用
1.png
如果還報less相關錯誤可以重新運行;實在不行 重啟開發(fā)工具
10. uni-app 組件 文檔
11. 代碼塊提示 編寫
快捷方式
u開頭有對應的提示
藍牙<switch checked @change="switchChange" />
事件
methods: {
switchChange: function(e) {
console.log('switch發(fā)生 change 事件，攜帶值為', e.target.value)
},
12. 查看效果
更多系統(tǒng)插件自己玩
13. 官網 右上角 插件市場
插件市場 可以自己開發(fā) 上傳 ,付費使用
1.png
14. 找一個插件下載 ,選擇項目確定
選用一個
uni-list為例
1.png
步驟一樣 點擊下載, HbuilderX下載
1.png
15. 查看內容 文檔有詳細說明
插件下方有詳細的介紹 ,使用方式
或者下載的文件 readme文件也可以看
`.png
查看效果
<uni-list>
<uni-list-item title="列表標題"></uni-list-item>
<uni-list-item :disabled="true" title="列表標題"></uni-list-item>
</uni-list>
結合 v-for
<uni-list>
<uni-list-item v-for="(item, index) in list" :title="item"></uni-list-item>
</uni-list>
