微信小程序開發(fā)工具知識(shí)(微信小程序開發(fā)工具使用)
今天給各位分享微信小程序開發(fā)工具知識(shí)的知識(shí),其中也會(huì)對(duì)微信小程序開發(fā)工具使用進(jìn)行解釋,如果能碰巧解決你現(xiàn)在面臨的問題,別忘了關(guān)注本站,現(xiàn)在開始吧!
零基礎(chǔ)學(xué)習(xí)微信小程序開發(fā),之前需要學(xué)習(xí)哪些知識(shí),謝謝
WX小程序開發(fā)課程免費(fèi)下載
鏈接:
提取碼:acrq
小程序是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想,用戶掃一掃或者搜一下即可打開應(yīng)用。也體現(xiàn)了“用完即走”的理念,用戶不用關(guān)心是否安裝太多應(yīng)用的問題。應(yīng)用將無(wú)處不在,隨時(shí)可用,但又無(wú)需安裝卸載。
微信小程序開發(fā)常用知識(shí)點(diǎn)
與iOS開發(fā)很相似,小程序的導(dǎo)航欄也可以全局設(shè)置一下,在公共文件app.json中設(shè)置了導(dǎo)航欄相關(guān)樣式如下:
這個(gè)地方是全局設(shè)置,如果想要在不同的頁(yè)面設(shè)置各自的標(biāo)題屬性,只需要在該子級(jí)文件中設(shè)置
子頁(yè)面想調(diào)用共公js的方法,需先在子頁(yè)面js中先實(shí)例化app:具體過(guò)程如下
在需要調(diào)用的子頁(yè)面中,
如果是嵌套循環(huán),很容易出現(xiàn)多個(gè)list和index,例如表視圖一樣,所以在小程序中可以重命名 list 和index 方法為:wx:for-index='重命名' wx:for-list="重命名"
在APP開發(fā)中,UI復(fù)用是一個(gè)很好的手段,在小程序上就是模板template。
在逛小程序聯(lián)盟的時(shí)候發(fā)現(xiàn)了一個(gè)大濕總結(jié)的比我好,搬過(guò)來(lái)一下。
微信小程序中,如果幾個(gè)頁(yè)面中需要引用同一個(gè)header/footer,當(dāng)定義了公共模板時(shí),有兩種引用方法如下:
方法一:在公共模板中定義template元素,利用 方法 ,這種方式只會(huì)顯示公共模板的template里面的內(nèi)容,之外的內(nèi)容不會(huì)顯示
** 方法二:**
總結(jié):import方式和imclude方式的不同在于前者僅引用公共模板中的template里面的內(nèi)容后者僅引用template以外的內(nèi)容,顯而易見,include方式更簡(jiǎn)單一些,在wxml中只需要一句話即可。
rpx單位是微信小程序中css的尺寸單位,rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上,屏幕寬度為375px,共有750個(gè)物理像素,則750rpx = 375px = 750物理像素,1rpx = 0.5px。
具體的 這里有一片文章介紹的很詳細(xì) , 還有這個(gè)
小程序的事件主要有:
小程序中的wxml中綁定事件有兩種:以touchtab為例 ,在wxml中必須有bind/catch不然無(wú)法實(shí)現(xiàn)上述事件
bindtouchtab和catchtouchtab bind的不會(huì)阻止事件冒泡(元素最里層到最外層函數(shù)執(zhí)行),catch會(huì)阻止冒泡,只是冒泡到當(dāng)前層結(jié)束
如果想在元素執(zhí)行某事件時(shí)把元素的某個(gè)屬性傳到后臺(tái) 可在元素中加入data-屬性名稱=“xxx”,在事件函數(shù)中 function(event){}的event中的currentTarget里面的data-set里面可查看接收在元素中綁定的的id或者其他屬性clientX/Y 查看滑動(dòng)手指距離屏幕左側(cè)的位置,查看滑動(dòng)位置也可以通過(guò)touchstart和和touchend的clientx/y獲取
看到幾個(gè)別人寫的,瞬間石化,果斷收藏。
在小程序中,定義了一項(xiàng)工具文件utils,此文件的js旨在本文件之內(nèi)有效,當(dāng)其他子頁(yè)面想調(diào)用其中的js方法或者變量時(shí),需要兩步驟:
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文件:
小程序的后臺(tái)獲取數(shù)據(jù)方式get/post具體函數(shù)格式如下:wx.request({})
如果屏幕中某元素的內(nèi)容超過(guò)此元素的高度,可設(shè)置元素為scroll-view 為滾動(dòng)狀態(tài)元素,這樣可以做到元素固定高度且元素內(nèi)容滾動(dòng)屏幕不滾動(dòng)的效果;
scroll-view標(biāo)簽的主要屬性分為以下幾種:
微信小程序廣告輪播元素 圖片所在元素/swiper-item
其中屬性有:
圖片更改事件:bindchange='imgchange' imagechange()的e.detail.current為當(dāng)前顯示頁(yè)面的下標(biāo)值
小程序開發(fā)
小程序開發(fā)有以下兩種方法:
1、使用第三方小程序制作工具。
這種制作方式非常簡(jiǎn)單,你需要選一個(gè)簡(jiǎn)單的小程序制作工具,盡量找知名度高、模板美觀、業(yè)界口碑好的平臺(tái),比如上線了,然后注冊(cè)賬號(hào)后選擇“創(chuàng)建小程序”。選一個(gè)你需要的模板,點(diǎn)擊進(jìn)入后臺(tái)編輯頁(yè)面。在這里你就可以制作你的小程序了。
這種方式以“展示”模板為例,在【通用風(fēng)格】里你可以設(shè)計(jì)小程序主題色、產(chǎn)品布局,自定義導(dǎo)航欄;在【頁(yè)面設(shè)計(jì)】里你可以添加各種功能版塊,包括輪播圖、拼接圖、快捷按鈕、標(biāo)題、視頻、產(chǎn)品列表等。
2、使用微信小程序開發(fā)者平臺(tái)。
如果你懂技術(shù)知識(shí),那么可以下載安裝官方小程序開發(fā)者工具。安裝好之后,就新建小程序項(xiàng)目,選擇代碼存放的硬盤路徑,填入自己的小程序的 AppID(沒有的話你要先到微信公眾平臺(tái)注冊(cè)一個(gè)小程序賬號(hào),在“設(shè)置”里可以查看你的小程序的 AppID)。勾選“創(chuàng)建 QuickStart 項(xiàng)目”,就可以開發(fā)自己的小程序了。
用這種方式開發(fā)你需要參考微信官方開發(fā)文檔,要遵循友好禮貌、清晰明確、便捷優(yōu)雅、統(tǒng)一穩(wěn)定的特點(diǎn),以及相應(yīng)的視覺規(guī)范(字體、列表、按鈕、圖標(biāo)等)。
小程序開發(fā)經(jīng)驗(yàn)總結(jié)
最近一直在做小程序,工作中也遇到了一些問題,踩了一些坑,所以想著寫篇文章記錄下來(lái),并借此將小程序開發(fā)的相關(guān)知識(shí)進(jìn)行梳理,方便以后參考,也為剛剛接觸小程序的人提供一些思路方法,互相學(xué)習(xí),共同進(jìn)步。
1、微信小程序的目錄結(jié)構(gòu)及配置說(shuō)明
app.json是小程序的全局配置文件,所有配置項(xiàng)key必須使用 雙引號(hào)括起來(lái) ,value值為字符串類型的也必須使用雙引號(hào), 不支持單引號(hào) 。
1.1 pages
pages選項(xiàng)是必須配置的。該配置項(xiàng)注冊(cè)了小程序所有頁(yè)面的地址,其中每一項(xiàng)都是頁(yè)面的 路徑+文件名 。每一個(gè)頁(yè)面都是由.json、.js、.wxml、.wxss四個(gè)文件組成,并且 四個(gè)文件的名字必須要一致 。
1.2 ? tabBar
tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn),以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁(yè)面。其中 list 接受一個(gè)數(shù)組,只能配置最少 2 個(gè)、最多 5 個(gè) tab
1.3?usingComponents
使用自定義組件或者插件提供的組件前,必須先在這里聲明
2、開發(fā)微信小程序遇到的問題及解決辦法
2.1 雙向綁定
微信小程序不支持通過(guò)v-model的方式實(shí)現(xiàn)自動(dòng)雙向綁定,需要給表單元素通過(guò)綁定事件,并使用this.setData來(lái)賦值實(shí)現(xiàn)。
2.2 computed和watch
微信小程序默認(rèn)是不支持computed和watch的,如需要使用這兩項(xiàng)功能,需要安裝miniprogram-computed ,安裝方法見 官方文檔
2.3 對(duì)象賦值
如果給對(duì)象的屬性賦值,可以使用this.setData({'obj.key':value})來(lái)賦值,但是如果給某個(gè)屬性名是變量的屬性賦值,通過(guò)這種方法是會(huì)報(bào)錯(cuò)的,經(jīng)過(guò)多次嘗試,發(fā)現(xiàn)使用如下的方式賦值成功。
let newObj = `obj.${key}`
this.setData({
[newObj]: value
})
2.4 scroll-view
當(dāng)頁(yè)面存在彈框容器,并且彈框里的內(nèi)容是需要滾動(dòng)條滾動(dòng)展示時(shí),如果彈框下面那層的容器使用view元素的話,會(huì)導(dǎo)致滾動(dòng)彈框內(nèi)容時(shí),同時(shí)會(huì)觸發(fā)彈框下面那層的頁(yè)面容器也會(huì)一起滾動(dòng),解決此問題可以將彈框下面的容器使用scroll-view元素替代view元素
3、小程序測(cè)試和發(fā)布
由于服務(wù)器域名request合法域名每個(gè)月 只能修改5次 ,因此在本地開發(fā)小程序時(shí),需要在微信調(diào)試工具中設(shè)置不校驗(yàn)合法域名。等小程序上線前再一次性將所有域名添加到小程序管理后臺(tái)。
以上便是此次小程序開發(fā)中積累的一些經(jīng)驗(yàn),希望能給剛剛接觸小程序的人提供一些思路方法,在以后的開發(fā)中,如果遇到新的問題,繼續(xù)更新文檔......
關(guān)于微信小程序開發(fā)工具知識(shí)和微信小程序開發(fā)工具使用的介紹到此就結(jié)束了,不知道你從中找到你需要的信息了嗎 ?如果你還想了解更多這方面的信息,記得收藏關(guān)注本站。