這幾天正式開始微信小程式的修煉了,就目前而言來看簡直就是vue和react的結合體,所以在學小程式前,先把框架熟悉還是挺有用的,
一.簡介
1.1與普通網頁區別

二.第一個小程式
需要注冊小程式開發賬號,最主要是獲得AppId
然后就需要安裝 微信開發者工具
2.1設定外觀和代理

2.2模擬器查看效果

2.3真機查看效果

三.小程式代碼構成
3.1專案基本組成結構

3.2頁面組成部分

3.2.1 json檔案的作用

- app.json

-
projec.config.json

-
sitemap.json我的理解為用戶在微信內部搜索的時候這個就發揮作用了,用戶可以直接通過微信搜索搜到你這個小程式

現在就是表示所有小程式頁面都可以被搜索到
如果不允許被索引到

-
頁面json

會覆寫掉全域下的配置
3.3 新建小程式頁面
直接通過修改app.json創建一個頁面即可自動創建

3.4 修改專案首頁
修改app.json里面的順序為第一位即可

3.5 WXML模板
和html的區別

3.6 WXSS
和css區別

注意最好別用太生僻的選擇器,wxss不會認,第二個是元素選擇器
3.7 js
分為三類

四.小程式宿主環境
宿主環境即程式運行所依賴的環境,比如安卓系統只能安裝安卓軟體,ios系統只能安裝蘋果軟體
手機微信是小程式宿主環境

4.1 通信模型
通信主體分為渲染層(wxml、wxss)和邏輯層(js腳本)
通信模型分為兩部分,渲染層和邏輯層的通信,邏輯層和第三方服務器的通信,都是由微信客戶端完成轉發

4.2 運行機制
小程式執行程序

頁面渲染程序

4.3 組件
一共分為九大類

-
視圖容器
view(div)、scroll-view(可滾動視圖區域)、swiper和swiper-item(輪播圖組件和里面的每一項)
view基本使用

scroll-view基本使用

注意要加橫向或者縱向滾動的屬性
swiper基本使用

swiper常用屬性:

-
基礎內容
text(span)、rich-text
text:selectable屬性表示支持長按選中文本操作(注意小程式只有text有這個屬性)

rich-text:將html字串渲染為對應ui結構通過nodes屬性節點
注意:外面是雙引號里面要用單引號

-
其他常用組件
button
比htmlbutton功能要更豐富


image
圖片組件寬高默認300px 240px

image:mode屬性
可以指定圖片裁剪縮放模式

4.4 API
一共分為三大類
- 事件監聽API wx就是小程式的頂級物件,類似于window

-
同步API

-
異步API

五.協同作業與發布
5.1 權限管理
首先如果是在中大型公司里面,開發一個小程式是需要同時多個人一起來協同開發的,包括開發和測驗都是有不同的權限的

開發流程:

5.2 成員管理
主要就是專案成員和體驗成員,最大的就是管理員

專案成員和體驗成員的添加洗掉在小程式管理后臺修改


5.3 發布
小程式版本

上傳版本

上傳之后就可以在后臺看見上傳的版本

審核通過就可以發布了

小程式的推廣與運行資料的查看

查看資料
一種是通過管理后臺

一種是通過小程式資料助手

轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/500480.html
標籤:其他
