首頁 > 知識?資訊 > 微信小程序的介紹和準備 > 正文

微信小程序的介紹和準備

2019/5/13 0:00:00 · 稿源:傳信譽

什么是小程序
微信之父張小龍是這樣描述的:
小程序是一種不需要下載安裝就可以使用的應用,它實現了應用觸手可及的夢想。

用戶掃一掃或者搜一下即可打開應用,也體現了用完即走的理念。
用戶不用關心是否安裝太多應用的問題:
應用將無處不在,隨時可用,但又無需安裝卸載。

應用:

1.不適用好幾種產品營銷策劃景象:免費在線開干洗店、圖文快印家具家電、線下門店吸引、產品營銷策劃行為、免費在線微信預約、外賣送貨送貨等。

2.適用多行業:食品快消、數碼家電、母嬰親子、美妝護膚、教育培訓、日用百貨、水果生鮮、餐飲外賣、蛋糕烘焙、美容美發、休閑娛樂、酒店旅游等。

優點:

1.研發強度系數低,強度系數不到App,能達到簡單的的根本使用軟件,符合生活水平服務項目類線下活動實體店及非需要高頻使用軟件的變為。2.搜集我的訂單,跟微商營銷城或直銷茶葉連鎖店開鑿,不需附加運營方法成本費,方便方法。3.自身數據視頻流量,小程序公眾號9億月頻繁大家,左右的小子程序、小程序公眾號搜到等功能鍵,讓輕松自由提取數據視頻流量,要把握住客。4.可能試 抵用券券/碼、店鋪優惠券/送、很多人拼單等不同營銷策略新玩法,緊緊抓住用戶流量,調用售量。5.都可以讀取比H5越來越多的安卓手機裝置技能運行開放,假如GPS精準定位、錄音帶、拍視頻、重量磁感應等,能開放更充實的運行場面。6.打開瀏覽器快速比常見H5快,比較接近于原始App。7.在安卓應用手飛機上手飛機上上可能含有被扣飛機上安卓機桌面,喜歡去跟原始App差非常少,但只限安卓應用手飛機上手飛機上,iphone就是不行的了。

8.運行速度跟App差不多,也能做出很多H5做不到的功能,開發成本跟H5差不多,相對來說開發成本比App要低。

缺點:

1.只能是1M的數值,影響沒有聯合開發大的小步驟,因此 如今許多小步驟非常渺小、很簡簡單單。2.小系統程序的技術水平方框還不可靠,發展措施有時有修飾,導致短期間內經常性要在線升級養護。3.不可能彈出視頻外鏈首頁,間接的導致了小執行程序的建成性。4.不可以可以說說到老微信相冊。

5.需要像App一樣審核上架,比H5即做即發布要麻煩。

準備工作
1.注冊賬號?(

2.激活郵箱
3.信息登記
4.登錄小程序管理后臺(不完善好信息是無法發布小程序的)
5.完善小程序信息,綁定開發者(尤其是團隊多人開發)


網站建設

網站設計

在官網下載安裝開發工具

網站制作安裝完成后就可以登錄:

微信掃碼登錄開發者工具,這里選小程序項目,進入小程序本地項目進行管理

網站設計


新建一個項目:

目錄自選本地文件夾,AppID就是登錄微信開發平臺后的設置里能看到的AppID。
如果沒有ID也可以使用官方的測試號,但這樣只能做做簡單的本地測試,最后是填上適合的項目名稱。

網站制作




上手第一個小程序新建項目

選擇一個空目錄,使用普通快速啟動模板
然后就可以看到預設的模板和內容了,可以直接查看或者點擊編譯在手機上掃一掃查看

網站設計

接下來了解一下小程序的目錄結構:


pages
index
index.js?頁面腳本邏輯文件
index.wxml?頁面模板文件
index.wxss?頁面樣式文件
index.json?單個頁面的配置信息,比如頭部底色,頭部title等

utils
app.js?全局邏輯
app.json?全局配置信息,包含了小程序的所有頁面路徑,界面表現,底部tab等基本信息
app.wxss?設置樣式
project.config.json?開發工具的配置信息

小執行程序的通電的過程:


打開小程序之前,微信會把小程序的代碼包下到本地。
然后通過app.json的pages字段知道當前小程序的所有頁面路徑,寫在pages字段的第一個頁面就是小程序的首頁。

然后微信就把首頁代碼裝載進來,渲染出首頁。

然后app.js里App的實例onLaunch回調就會執行來一段簡單的實戰,為項目增加一個city選擇頁:
首先添加一個新的頁面

1.在pages文本名放入新對話框文本名

網站設計

2.為city.wxml模板頁面添加選擇器

11.jpg


picker是一個類似于select的picker組件
bindchange是用于綁定一個change事件的方法
value的值是一個序列號
range則是表示這個選擇器的取值范圍

3.然后在city.js中書寫頁面邏輯:

11.jpg


Page({})是頁面的一個實例
data中的數據用于視圖綁定
bindPickerChange則是綁定的change事件的函數名

可以看到,data中的數據可以在頁面中被直接綁定使用
在js代碼中想要改變data的值也非常簡單,使用this.setData就可以了
這里我們傳入了一個index序列號,也就是picker選擇器選擇了country數組中的元素。

通過這樣的方法,就可以為頁面添加不同的組件。

4.選擇之后如果想要將選中的city的值傳到其他頁面比如首頁

那么一般來講有3種方法:

第一種是將數據存到全局的data中,也就是app.js的data中,這樣所有的頁面都能取到這些數據。
但我們并不推薦這樣的用法,就如同我們不推薦使用全局變量都一樣。

第二種是將數據帶在url路徑后作為參數傳導:

這樣的做法在傳輸復雜數據的時候并不是太合適。

第三種則是使用本地存儲,在需要的頁面再將其取出就可以了:
// 存儲
wx.setStorageSync('city', {});
// 取出
wx.getStorageSync('city');

這樣就完成了我們的第一個上手小頁面的開發。小程序的開發有時候并不簡單,需要等更多的學習時間來完成。北京傳誠信網站建設是你的選擇。

  • 相關推薦
  • 大家在看
客戶服務
顧問服務熱線 010-62199213 各地勉費詢問熱線電話 400-697-8610