釋放雙眼，帶上耳機，聽聽看~！
什麼是小程式：微信小程式是騰訊於2017年1月9日推出的一種不需要下載安裝即可在微信平台上使用的應用，主要提供給企業、政府、媒體、其他組織或個人的開發者在微信平台上提供服務。
目的：我學習小程式的目的是為了學app,當時覺得小程式可能比app開發要簡單吧
前序
- 什麼是小程式：微信小程式是騰訊於2017年1月9日推出的一種不需要下載安裝即可在微信平台上使用的應用，主要提供給企業、政府、媒體、其他組織或個人的開發者在微信平台上提供服務。
- 目的：我學習小程式的目的是為了學app,當時覺得小程式可能比app開發要簡單吧
- 感受：
- Visual Studio Code (開發推薦)
-
微信開發者工具
- 右鍵創建components(創建元件推薦)
項目目錄解析
- 右鍵創建components(創建元件推薦)
-
pages 頁面 (根據需求,下面是大致範本)
- images 頁面下的圖片
- page.wxml 骨架
- page.wxss 樣式
- page.js 業務邏輯
- page.json 配置
-
components 元件 (根據需求,下面是大致範本)
- component.wxml 骨架
- component.wxss 樣式
- component.js 業務邏輯
- component.json 配置
- images 存放元件的圖片
- beh.js 行為重複利用可初始化數據
- images 全局圖片
- models 模型(Api調用的業務邏輯)
- summary 總結(summary.md必不可少)
- util 存放全局外部WXS,請求的JS
- app.js 接入口
- app.json 視窗配置
- app.wxss 外部CSS
- config.js 配置
-
project.config.json 環境配置([‘api:url,key’,”,”])
新建項目 實現第一個pages頁面
app.json和app.js的新建是空的 在你創建的時候必須寫入初始化的代碼,否則創建page頁面會報錯
page和components的創建可以選擇微信開發者工具(會給你生成四個基本文件：wxml,wxss,js,json) - app.json 採用json花括號格式 {}
-
app.js 初始化 App({})
關於創建範本 可能會和微信開發者工具版本有關,版本不同範本也就不同 你可以選擇用微信自帶範本也可以自己創建
下面是我創建的一個範本
微信自帶的(可以根據需求，自己增刪)
關於wxml和wxss
wxml和wxss和html和css基本上是非常相似的,在頁面布局方面跟網站是差不多,但是它也有屬於自己的特性,我就稍微介紹一兩個
- 布局方面盡量選擇iphone6大小開發.原因:在iPhone6上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
不同的屏幕大小不一樣rpx=?px不一樣,在較小的屏幕上不可避免的會有一些毛刺，請在開發時盡量避免這種情況。- rpx 小程式自身增加的
- px 不多說了
- flex 彈性布局
- flex 相當於一個容器,可以實現子元素的排列布局等,用的好可以大大節省代碼，非常好
- 行內元素也可以使用 display:inline-flex
- 常用屬性:
- flex-direction 決定元素朝哪個方向排步 row column….
- flex-wrap 跟換行有關
- justify-content 對齊方式(橫) flex-start,center..
- align-items 對齊方式(豎)
- order 排序
- font-size 到底是用rpx還是用px呢
具體情況具體使用,但大多數情況下,我們的字體使用rpx。最小支持12px,在小也沒變化了(QAQ好像會變小啊,難道是版本更新的問題)
晚點在更新,給你們點神秘感~~~
聲明：本文為原創作品，版權歸作者所有。未經許可，不得轉載或用於任何商業用途。如若本站內容侵犯了原著者的合法權益，可聯繫我們進行處理。
加油