微信小程序開發(fā)所需知識(小程序的開發(fā)需要什么基礎(chǔ)?)
本篇文章給大家談?wù)勎⑿判〕绦蜷_發(fā)所需知識,以及小程序的開發(fā)需要什么基礎(chǔ)?對應(yīng)的知識點,希望對各位有所幫助,不要忘了收藏本站喔。
微信小程序開發(fā)需要哪些條件?
開發(fā)微信小程序需要用到以下技術(shù):
1、wxml,小程序常用語言為wxml,wxml是微信但是你熟悉wxml之后會發(fā)現(xiàn)其實它的編程理念和HTML的網(wǎng)頁編程比較類似。
2、wxss,wxss更趨向于CSS,wxss,其實主要的實現(xiàn)思想理念也和網(wǎng)頁的開發(fā)技術(shù)差別不大,主要是一些標簽的一些簡單替換,大部分和原先的css、基本不誤,都是通過同頁面調(diào)用的方式實現(xiàn)的。
3、js,開發(fā)小程序還必須掌握js技術(shù),如果html+css+js的基礎(chǔ)打的好,再來學(xué)習(xí)一下微信小程序js,之后在前端開發(fā)上就沒有什么問題了。
4、服務(wù)器語言,如果不是專業(yè)的后端開發(fā)者,可能后端有一定的難度其學(xué)習(xí)曲線較陡。但是,仍然建議開發(fā)者學(xué)習(xí)一下后端語言,至少需要了解大致的原因框架,能夠看懂其代碼邏輯,這樣不僅可以很好地實現(xiàn)前后端的配合,也能夠在小程序出現(xiàn)bug的時候使用。常見的有PHP、Java、Python、ASP等技術(shù)。
5、數(shù)據(jù)庫語言,如果公司數(shù)據(jù)量不大,架構(gòu)不復(fù)雜的話數(shù)據(jù)庫語言相對來說是比較簡單的,一般學(xué)會一些常用的命令以及常出現(xiàn)的問題就能夠應(yīng)付使用。常用的數(shù)據(jù)庫有免費的MySQL、msSQL、MongoDB、Oracle等數(shù)據(jù)庫。
小程序開發(fā)經(jīng)驗總結(jié)
最近一直在做小程序,工作中也遇到了一些問題,踩了一些坑,所以想著寫篇文章記錄下來,并借此將小程序開發(fā)的相關(guān)知識進行梳理,方便以后參考,也為剛剛接觸小程序的人提供一些思路方法,互相學(xué)習(xí),共同進步。
1、微信小程序的目錄結(jié)構(gòu)及配置說明
app.json是小程序的全局配置文件,所有配置項key必須使用 雙引號括起來 ,value值為字符串類型的也必須使用雙引號, 不支持單引號 。
1.1 pages
pages選項是必須配置的。該配置項注冊了小程序所有頁面的地址,其中每一項都是頁面的 路徑+文件名 。每一個頁面都是由.json、.js、.wxml、.wxss四個文件組成,并且 四個文件的名字必須要一致 。
1.2 ? tabBar
tabBar 配置項指定 tab 欄的表現(xiàn),以及 tab 切換時顯示的對應(yīng)頁面。其中 list 接受一個數(shù)組,只能配置最少 2 個、最多 5 個 tab
1.3?usingComponents
使用自定義組件或者插件提供的組件前,必須先在這里聲明
2、開發(fā)微信小程序遇到的問題及解決辦法
2.1 雙向綁定
微信小程序不支持通過v-model的方式實現(xiàn)自動雙向綁定,需要給表單元素通過綁定事件,并使用this.setData來賦值實現(xiàn)。
2.2 computed和watch
微信小程序默認是不支持computed和watch的,如需要使用這兩項功能,需要安裝miniprogram-computed ,安裝方法見 官方文檔
2.3 對象賦值
如果給對象的屬性賦值,可以使用this.setData({'obj.key':value})來賦值,但是如果給某個屬性名是變量的屬性賦值,通過這種方法是會報錯的,經(jīng)過多次嘗試,發(fā)現(xiàn)使用如下的方式賦值成功。
let newObj = `obj.${key}`
this.setData({
[newObj]: value
})
2.4 scroll-view
當頁面存在彈框容器,并且彈框里的內(nèi)容是需要滾動條滾動展示時,如果彈框下面那層的容器使用view元素的話,會導(dǎo)致滾動彈框內(nèi)容時,同時會觸發(fā)彈框下面那層的頁面容器也會一起滾動,解決此問題可以將彈框下面的容器使用scroll-view元素替代view元素
3、小程序測試和發(fā)布
由于服務(wù)器域名request合法域名每個月 只能修改5次 ,因此在本地開發(fā)小程序時,需要在微信調(diào)試工具中設(shè)置不校驗合法域名。等小程序上線前再一次性將所有域名添加到小程序管理后臺。
以上便是此次小程序開發(fā)中積累的一些經(jīng)驗,希望能給剛剛接觸小程序的人提供一些思路方法,在以后的開發(fā)中,如果遇到新的問題,繼續(xù)更新文檔......
小程序開發(fā)需要學(xué)什么?
熟練掌握HTML語言、CSS、JavaScript
1.HTML就是超文本標記語言的簡寫,HTML是網(wǎng)頁開發(fā)前端三劍客之一,主要負責網(wǎng)頁的骨架,就如同動物的骨架一樣,HTML語言就是支撐網(wǎng)頁布局的骨架。CSS主要負責網(wǎng)頁樣式,網(wǎng)頁內(nèi)容如何分布,板塊背景,顏色等外觀問題可以有CSS控制。JavaScript是一種動態(tài)的腳本語言,在服務(wù)器端迸發(fā)出非凡的活力,成為當前非?;钴S的語言之一。因此想要做小程序開發(fā),就必須要掌握HTML語言、CSS、JavaScript。
2、服務(wù)器語言
如果不是專業(yè)的后端開發(fā)者,可能后端有一定的難度其學(xué)習(xí)曲線較陡。但是,仍然建議開發(fā)者學(xué)習(xí)一下后端語言,至少需要了解大致的原因框架,能夠看懂其代碼邏輯,這樣不僅可以很好的實現(xiàn)前后端的配合,也能夠在小程序出現(xiàn)bug的時候扯皮用。服務(wù)器的語言有很多比較常用的是PHP、Java、Python、ASP等技術(shù),建議開發(fā)者根據(jù)公司內(nèi)部技術(shù)的使用情況挑選進行學(xué)習(xí)。
3、數(shù)據(jù)庫語言
如果公司數(shù)據(jù)量不大,架構(gòu)不復(fù)雜的話數(shù)據(jù)庫語言相對來說是比較簡單的,一般學(xué)會一些常用的命令以及常出現(xiàn)的問題就能夠應(yīng)付使用。常用的數(shù)據(jù)庫有免費的MySQL、msSQL、MongoDB、Oracle等數(shù)據(jù)庫。
我目前是在職前端開發(fā),如果你現(xiàn)在也想學(xué)習(xí)前端開發(fā)技術(shù),在入門學(xué)習(xí)前端的過程當中有遇見任何關(guān)于學(xué)習(xí)方法,學(xué)習(xí)路線,學(xué)習(xí)效率等方面的問題,你都可以申請加入我的前端學(xué)習(xí)交流3000人裙:前面:851 中間:231 最后:348。里面聚集了一些正在自學(xué)前端的初學(xué)者裙文件里面也有我做前端技術(shù)這段時間整理的一些前端學(xué)習(xí)手冊,前端面試題,前端開發(fā)工具,PDF文檔書籍教程,需要的話都可以自行來獲取下載。
微信小程序一直的宗旨就是觸手可及的體驗,再伴隨著微信移動端的巨大流量,小程序開發(fā)的前景在未來會更好。想要學(xué)習(xí)小程序開發(fā)的小伙伴,只需要學(xué)習(xí)一些網(wǎng)站開發(fā)的基本知識技能,在多動手自己練習(xí)一些項目,相信很快就能夠自己親自開發(fā)出一款小程序。
想要開發(fā)微信小程序?這五個知識點一定要知道
在國家大數(shù)據(jù)戰(zhàn)略背景下,隨著互聯(lián)網(wǎng)與云計算技術(shù)的日益發(fā)展,人們對于信息資源的競爭達到了前所未有的高度。每一種新的技術(shù)應(yīng)用的誕生,都會對信息的獲取和傳播產(chǎn)生巨大的影響,然后促進 社會 生產(chǎn)和生活各個領(lǐng)域的創(chuàng)新和變革。微信小程序作為互聯(lián)網(wǎng)技術(shù)的創(chuàng)新產(chǎn)品,而且依附于微信這個巨大的流量池,對于廣大商家而言,吸引力毋庸置疑。
正因如此,很多商家都想要開發(fā)自己的小程序,但在開發(fā)小程序之前,以下五點知識是一定要知道的。第一,什么是微信小程序?微信小程序誕生于2017年1月,是騰訊旗下的戰(zhàn)略級產(chǎn)品,無需安裝即可嵌入微信中,用戶能夠通過掃描和搜索QR碼來打開應(yīng)用獲取所需的信息。其是一種將用戶信息和服務(wù)連接起來的新方法。
第二,小程序的本質(zhì)和定位是什么?隨著市場的發(fā)展和技術(shù)的進步,依靠人口和流量紅利增長的時代已經(jīng)成為過去。現(xiàn)如今主要是依靠創(chuàng)新來滿足各個行業(yè)用戶的需求,而小程序的推出,能夠為各行各業(yè)提供全新的、人性化的信息體驗。在信息獲取方面,能夠為用戶提供更加便捷,靈活的一站式信息搜索平臺。
第四,小程序的定位是什么?微信小程序服務(wù)理念是:“無需安裝,觸手可及,搜索后即可使用,無需卸載,無處不在,可隨時訪問”。小程序相對正式的定位是“輕量級應(yīng)用程序”的簡單操作,即移動中輕量級和無客戶端的概念。其豐富的功能和靈活性結(jié)合了移動端app,Web網(wǎng)站、微信服務(wù)號等諸多優(yōu)點于一身。
第五,小程序信息傳播的優(yōu)勢在哪?基于微信強大的關(guān)系網(wǎng)絡(luò),小程序可以通過社交聊天,比如群聊以及朋友圈實現(xiàn)信息傳播。除此之外,微信自身為小程序的推廣,同樣增添了很多入口。當下的小程序,不僅能夠關(guān)聯(lián)公眾號,而且能夠關(guān)聯(lián)視頻號,微信提供的入口與視頻號、公眾號提供的入口,都給小程序的推廣提供了巨大動力。
微信小程序開發(fā)常用知識點
與iOS開發(fā)很相似,小程序的導(dǎo)航欄也可以全局設(shè)置一下,在公共文件app.json中設(shè)置了導(dǎo)航欄相關(guān)樣式如下:
這個地方是全局設(shè)置,如果想要在不同的頁面設(shè)置各自的標題屬性,只需要在該子級文件中設(shè)置
子頁面想調(diào)用共公js的方法,需先在子頁面js中先實例化app:具體過程如下
在需要調(diào)用的子頁面中,
如果是嵌套循環(huán),很容易出現(xiàn)多個list和index,例如表視圖一樣,所以在小程序中可以重命名 list 和index 方法為:wx:for-index='重命名' wx:for-list="重命名"
在APP開發(fā)中,UI復(fù)用是一個很好的手段,在小程序上就是模板template。
在逛小程序聯(lián)盟的時候發(fā)現(xiàn)了一個大濕總結(jié)的比我好,搬過來一下。
微信小程序中,如果幾個頁面中需要引用同一個header/footer,當定義了公共模板時,有兩種引用方法如下:
方法一:在公共模板中定義template元素,利用 方法 ,這種方式只會顯示公共模板的template里面的內(nèi)容,之外的內(nèi)容不會顯示
** 方法二:**
總結(jié):import方式和imclude方式的不同在于前者僅引用公共模板中的template里面的內(nèi)容后者僅引用template以外的內(nèi)容,顯而易見,include方式更簡單一些,在wxml中只需要一句話即可。
rpx單位是微信小程序中css的尺寸單位,rpx可以根據(jù)屏幕寬度進行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上,屏幕寬度為375px,共有750個物理像素,則750rpx = 375px = 750物理像素,1rpx = 0.5px。
具體的 這里有一片文章介紹的很詳細 , 還有這個
小程序的事件主要有:
小程序中的wxml中綁定事件有兩種:以touchtab為例 ,在wxml中必須有bind/catch不然無法實現(xiàn)上述事件
bindtouchtab和catchtouchtab bind的不會阻止事件冒泡(元素最里層到最外層函數(shù)執(zhí)行),catch會阻止冒泡,只是冒泡到當前層結(jié)束
如果想在元素執(zhí)行某事件時把元素的某個屬性傳到后臺 可在元素中加入data-屬性名稱=“xxx”,在事件函數(shù)中 function(event){}的event中的currentTarget里面的data-set里面可查看接收在元素中綁定的的id或者其他屬性clientX/Y 查看滑動手指距離屏幕左側(cè)的位置,查看滑動位置也可以通過touchstart和和touchend的clientx/y獲取
看到幾個別人寫的,瞬間石化,果斷收藏。
在小程序中,定義了一項工具文件utils,此文件的js旨在本文件之內(nèi)有效,當其他子頁面想調(diào)用其中的js方法或者變量時,需要兩步驟:
1:在utils被調(diào)用的js文件中,面向?qū)ο蟮姆绞侥P洼敵觯?module.exports={要調(diào)用的函數(shù)名稱:要調(diào)用的函數(shù)名稱 };
2:在要調(diào)用的js文件中模塊化引入utils的js文件 var object=require("utils被調(diào)用的js文件地址"); 可以輸出一下object就能看到被調(diào)用的方法了;
例子如下:
要調(diào)用的js文件:
小程序的后臺獲取數(shù)據(jù)方式get/post具體函數(shù)格式如下:wx.request({})
如果屏幕中某元素的內(nèi)容超過此元素的高度,可設(shè)置元素為scroll-view 為滾動狀態(tài)元素,這樣可以做到元素固定高度且元素內(nèi)容滾動屏幕不滾動的效果;
scroll-view標簽的主要屬性分為以下幾種:
微信小程序廣告輪播元素 圖片所在元素/swiper-item
其中屬性有:
圖片更改事件:bindchange='imgchange' imagechange()的e.detail.current為當前顯示頁面的下標值
微信小程序開發(fā)所需知識的介紹就聊到這里吧,感謝你花時間閱讀本站內(nèi)容,更多關(guān)于小程序的開發(fā)需要什么基礎(chǔ)?、微信小程序開發(fā)所需知識的信息別忘了在本站進行查找喔。