摘要:自從微信公開課說可以真機調試,我煞費苦心亂琢磨做,看文檔,畫葫蘆畫瓢,終于做一個小程序并上傳而且審核成功了。就是微信給我們提供的。你要問我為什么,畫葫蘆畫瓢不會啊不過聽說微信的語法是什么的,雖然我不懂。
前言
萬事開頭難,小程序也不例外。慕課網那個小程序課程微信小程序入門與實戰 ,說實話,那時候剛出我就買了,然而我一個做后端從提不起興趣靜下心看。自從微信公開課說可以真機調試,我煞費苦心亂琢磨做,看文檔,畫葫蘆畫瓢,終于做一個小程序并上傳而且審核成功了。那么我是如何教大家一天做好小程序呢?聽我一一道來。
首先,貼上我的小程序嘛,以便做裝逼憑證
開發工具,去官網下載開發工具這是必備的!
既然是小程序,它其實是一個前端的東西,我需要你會做后端的接口。
準備好后端接口,畢竟小程序也只負責連接傳輸數據。
如果你要發布,你必須要弄https,現在https也很簡單,去阿里云的CA證書免費搞一個
怎么做好微信小程序界面對于所有初遇小程序的小伙伴們,想做好小程序的第一步,那就是界面。對于任何后端來說(大部分),對javascript,Html,CSS都大概了解,看得懂,會用一點,基本語法怎么用都略知一二,但是要你做一個完整的前端完整的頁面呢?從0開始寫?nonono,一個良好優秀的我們,不會這么做,我們也不會。對于web應用來說,我們可以套用模板,用框架,用layui,用拼圖CSS等等一點點就可以湊成一個還算可以的網頁,甚至我們可以去copy別人頁面來做自己頁面(不要臉啊哈哈哈哈)
沒錯!我就是要教你們這么做哇啊哈哈哈哈,真他媽爽。
一點點打代碼是不可能的,這輩子都不可能一點點打代碼的,只有copy和借鑒才可以維持的了生活這樣子。
首選,我們要去下載一個CSS庫(WXSS),然后導入我們的樣式。
注意事項:
wxss就是web的css
js還是js
web是html,小程序是wxml
*json后綴我也不知道,還不需要用。不過看官方示例好像是配置。我們一般不用就留{}放在那
微信有一個專門為方便前端用的框架來增加用戶對微信的體驗度,相信大家都知道,就是weui------>weui的Github,
我們最好在新建項目上用官方的Demo進行修改和參考,可以省很多事。具體最好還要參考文檔。如果你跟我說文檔好難哦。拜托,這對于我們后端要看什么Spring源碼Struts2源碼啥的簡單多了!(表示都不會看只會用)
weui的使用和我們用CSS庫一樣,只是我們要知道我們的盒子容器div在小程序是view,給他賦予class就可以呈現出我們的樣式了,比如來個九宮格:
身份證識別
更多使用可以在github查看官方案例,一點一點拼湊,很簡單的。還有一點就是要引入庫,如何引入庫呢?
我們要去github下載我們需要的CSS,會不會去找?我還是給你貼上吧大爺!
過來大爺,點進去把CSS樣式復制了
既然這個庫大家都要引用,然后要在根目錄讓大家方便引用咯。所以我們要在根目錄引用它。
@import "../../weiui.wxss";
這樣我們的樣式基本東湊西湊就搞定了。
如何讓小程序動態起來我們在web上的話,就可以用javascript一樣用document.get什么鬼的就可以讓界面改變,然后連接后端,讓界面的數據隨著與后端數據的傳輸改變。當然啦,小程序是不可以這樣子的。因為小程序沒有DOM節點,這不知道是優點還是缺點。當然,我們有另外一種方法。就是微信給我們提供的setData。
這東西很煩人,我在網上查閱的時候,好像看到這玩意一直在更新,更新了就不能用了,還要換種寫法才可以。抱著亂試亂改,終究還是寫出來了。可能不是很規范。之所以之前不學小程序也是因為這個,一直在改不穩定。等穩定差不多再來學。
var app = getApp() Page({ data: { }, });
data里面應該怎么寫呢?我隨便舉個例子,比如我要弄個對象就是
Page({ data: { result: "我是楠尼瑪", }, });
然后去wxml里面寫{{result}} 頁面就有個我是楠尼瑪。你要問我為什么,畫葫蘆畫瓢不會啊!不過聽說微信的語法是ES6什么的,雖然我不懂。
那我們怎么去修改這個data里面的數據呢,要是里面很多個數據要怎么修改呢?
var that = this //必須 that.setData({ result: "這么巧啊我也是" })
我記得沒錯的話可以直接this.setData,但是必須要對象而且有時候要點兩次才反應。
至于上傳文件什么呀,點擊事件呀,文檔寫的實在太清楚了。我也不細說了。基本這功能去文檔復制改一改就可以用了。然后接上自己的接口返回數據就行啦。
還有一些好心的給源代碼的,樣式基本跟web一樣可以扣過來直接用。只要你看的懂就行。而且好像有一些網頁可以在線制作然后下載下來就可以直接拿來當樣式了。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/115631.html
摘要:自從微信公開課說可以真機調試,我煞費苦心亂琢磨做,看文檔,畫葫蘆畫瓢,終于做一個小程序并上傳而且審核成功了。就是微信給我們提供的。你要問我為什么,畫葫蘆畫瓢不會啊不過聽說微信的語法是什么的,雖然我不懂。 前言 萬事開頭難,小程序也不例外。慕課網那個小程序課程微信小程序入門與實戰 ,說實話,那時候剛出我就買了,然而我一個做后端從提不起興趣靜下心看。自從微信公開課說可以真機調試,我煞費苦心...
摘要:自從微信公開課說可以真機調試,我煞費苦心亂琢磨做,看文檔,畫葫蘆畫瓢,終于做一個小程序并上傳而且審核成功了。就是微信給我們提供的。你要問我為什么,畫葫蘆畫瓢不會啊不過聽說微信的語法是什么的,雖然我不懂。 前言 萬事開頭難,小程序也不例外。慕課網那個小程序課程微信小程序入門與實戰 ,說實話,那時候剛出我就買了,然而我一個做后端從提不起興趣靜下心看。自從微信公開課說可以真機調試,我煞費苦心...
本篇文章主要為大家講述關于在微信小程序中如何實現日期范圍的選擇。 具體樣式如下: 分別點擊開始日期和結束日期選擇時間(底部彈框): date.wxml: <viewclass="range-stylemar-top"> <viewclass="picker-title">日期范圍:</view> <...
本篇文章主要為大家介紹微信小程序實現計時器開始和結束整個演示代碼過程: 1、首先,我們先看看微信小程序計時功能,點擊開始計時 2、wxml <viewclass='tip'>計時器{{h}}:{{m}}:{{s}}</view> <buttonclass='butbg-blueon'bindtap="taskSt...
摘要:雖然有了十全的計劃,但如何高效率去記住上面那么多東西是一個大問題,看看我是怎么做的。 前言 前一篇文章講述了我在三月份毫無準備就去面試的后果,一開始心態真的爆炸,但是又不服氣,一想到每次回來后家人朋友問我面試結果的期待臉,越覺得必須付出的行動來證明自己了。 面經傳送門:一個1年工作經驗的PHP程序員是如何被面試官虐的? 下面是我花費兩個星期做的準備,主要分三部分: 有計劃——計劃好...
閱讀 3043·2021-09-03 10:33
閱讀 1270·2019-08-30 15:53
閱讀 2618·2019-08-30 15:45
閱讀 3378·2019-08-30 14:11
閱讀 527·2019-08-30 13:55
閱讀 2581·2019-08-29 15:24
閱讀 1906·2019-08-26 18:26
閱讀 3558·2019-08-26 13:41