「前端筆記」從零開始的微信小程式的實戰心得

下載地址👈

目錄隱藏

1. 前序

2. 開發工具:

3. 項目目錄解析

4. 新建項目實現第一個pages頁面

4.1. 下面是我創建的一個範本

4.2. 微信自帶的(可以根據需求，自己增刪)

5. 關於wxml和wxss

5.1. wxml和wxss和html和css基本上是非常相似的,在頁面布局方面跟網站是差不多,但是它也有屬於自己的特性,我就稍微介紹一兩個

6. 晚點在更新,給你們點神秘感~~~

7. 相關文章：

前序

什麼是小程式：微信小程式是騰訊於2017年1月9日推出的一種不需要下載安裝即可在微信平台上使用的應用，主要提供給企業、政府、媒體、其他組織或個人的開發者在微信平台上提供服務。
目的：我學習小程式的目的是為了學app,當時覺得小程式可能比app開發要簡單吧
感受：
- 作為一個後端起步的程式員,本次學習完本套小程式之後切身體會前端是個非常要注意細節的活;
- 開發語言:
  - 頁面的布局:基本類似html,css,可以參考,不過他也有屬於他自己的東西(wxml,wxss…)
  - JavaScript:微信小程式的 JavaScript 運行環境即不是 Browser 也不是 Node.js。它運行在微信 App 的上下文中，不能操作 Browser context 下的 DOM，也不能通過 Node.js 相關接口訪問操作系統 API。
- 整體的開發思維我覺得跟後端框架是很相似的,如元件化開發,模型..
- 代碼風格相似python,學過es6,前端框架的同學,那就很舒服了!
- 找bug是非常難的,需要對小程式開發有一定的經驗(太多細節需要注意，甚至有些細節，沒有注意，沒有報錯)
- 開發好的元件供自己使用或者open是非常有必要的
  !!!!!!
  建議大家在開發小程式的時候，使用git版本控制器和github進行代碼託管以便小程式的再開發和保護
  QAQ博主快寫完的時候碰到bug項目還neng崩了
  
  開發工具:
Visual Studio Code (開發推薦)
微信開發者工具
- 右鍵創建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呢