网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網

微信小程序開發(fā)步驟講解和實用小技巧

發(fā)布時間:2018-02-06 14:45 所屬欄目:小程序開發(fā)教程

文中提到的登錄微信公眾號后的功能,都是下圖中的其中一個:


文中提到的所有例子都在智能對話小程序里都有使用,代碼詳細解析見帖子 <font face="" "="" style="word-wrap: break-word; margin: 0px; padding: 0px;">個人小程序實現(xiàn)自然語言對話工程查詢完整代碼解析
 
1 注冊   
注冊一個微信小程序公眾號,包括賬號注冊和管理員信息登記,管理員信息登記很重要,因為管理員才有權限發(fā)布小程序、設置開發(fā)版的體驗用戶等。
請注意,公共號注冊時選擇小程序,不是通常認為的公眾號。


  • 注冊地址:

郵箱和密碼請?zhí)顚懳醋赃^公眾平臺、開放平臺、企業(yè)號、未綁定個人號的郵箱。


  • 填寫主體信息

郵箱激活之后,需要完善主體信息和管理員信息。
一般沒有企業(yè)注冊信息的,就選擇個人注冊賬號類型。
注意,個人賬號填寫管理員信息時,需要使用綁定了銀行卡且與注冊主體一致的微信掃描二維碼。如下圖所示:
 



  • 填寫小程序基本信息

在小程序的公眾平臺的首頁,會看到基本信息的填寫,如下圖:
填寫基本信息時的服務類目很重要,即表示你的小程序支持哪些服務。基本信息填寫完成之后,小程序的注冊工作就結束了。


2  開發(fā)工具及準備工作
  • 獲取AppID

如果你要開發(fā)一個需要發(fā)布的小程序,在你的公眾號里找到設置->開發(fā)設置,找到AppID

     

  • 開發(fā)工具安裝

下載:登錄小程序公眾號之后,找到首頁,有開發(fā)工具下載,幫助文檔等。


  • 添加項目

下載安裝好開發(fā)工具,開始添加項目。


在AppID處填上你公眾號的AppID.
項目名稱隨便填。
項目目錄可以直接指向Demo地址,也可以指向一個空的文件夾(可以選擇quick start項目)。

  • 代碼編譯

編譯選項使用默認設置即可,每次保存之后會自動編譯。當你的控件正常顯示之后,表示編譯結束。當然,也可以查看Console.
當Console顯示編譯完畢,但你的控件沒有完全顯示時,應該是你電腦速度太慢,關掉工程,重新打開即可。

  • 調試

-------- 調試期間不要修改代碼。只能在編輯頁面修改,保存之后,需要重新調試。
-------- 調試支持斷點調試,Console可以直接寫代碼輔助調試,類似瀏覽器console的功能。
-------- 如果控件的布局總是調不好,最好直接在調試界面的Wxml里調試,可以清晰的看到調用了哪些class,每種class的哪些屬性在起作用。

  • 預覽

  管理員有預覽項目的功能,即在手機上看小程序的效果。
開發(fā)工具中找到“項目”一欄->預覽,然后拿微信掃描即可。可使用半小時。
微信上可以在"發(fā)現(xiàn)"->"小程序"中找到你的小程序開發(fā)版本。

  • 代碼上傳

代碼上傳之后可以邀請其他微信用戶體驗,或者提交審核。
在開發(fā)工具中選擇選項->基礎信息->上傳  



  • 體驗

代碼上傳之后,可以邀請其他成員體驗,但必須先把他們設置為體驗者。
設置方式:公眾號登錄—>用戶身份->體驗者->綁定
每個賬號可以綁定10個體驗者。

體驗者同意體驗后可在其微信的發(fā)現(xiàn)->小程序里找到體驗版本。


3    功能確認
功能確認就是確認你的小程序到底要完成什么功能,為什么要單獨寫這個呢?如果你的小程序功能不符合要求,那審核是過不了的。

下面幾項要重點閱讀:


4   框架介紹和小技巧分享
      在學習小程序的框架前,需要學習一些JS,CSS 的知識。
本文僅描述一些小技巧。


  • 網絡訪問注意事項

---------小程序無法直連外部URL,就是外部頁面
---------訪問服務器,比如API接口
注意:request 僅支持https的訪問方式。另外,你訪問的域名必須在公眾號賬號設置,否則調試代碼會報錯。
request域名的設置方式: 公眾號->設置->開發(fā)設置 ,見下圖



域名每個月只能設置五次,謹慎修改。
修改域名之后務必到開發(fā)工具的項目->配置信息中進行刷新,這樣域名才能生效。
如果只是希望測試URL是否好用,不確定最終是否使用這個服務器,可以在開發(fā)階段去掉域名檢測,開發(fā)工具->項目:




  • 布局引用

在使用.wxss描述控件的布局和樣式時,同樣的控件布局可以寫在一個公用的wxss文件里,其他wxss可以再引用這個公用文件,比如:
      @import "../../common/common.wxss";

  • 主頁設置

主頁不需要特殊設置,在app.json的pages屬性里,排在第一個的就是主頁。下圖中的主頁就是index


"pages":[    "pages/index/index",   "pages/components/identify/identify",    "pages/components/dict/dict",   "pages/components/express/express",   "pages/components/general/general",    "pages/components/mine/mine"  ]



  • Pages分類管理

盡量每一個頁面放在一個子文件夾里,代碼看起來清晰。在下圖中,components下面有五個子頁面。


  • 列表渲染

當同一個View中需要放多個格式相同的控件時,盡量使用列表渲染的方式,代碼容易維護,樣式也美觀。
可以參考博客:
http://blog.csdn.net/huangmeimao/article/details/76038974


  • 圖片格式

1 微信小程序中使用的圖片size盡量要小,格式為.png.
可以在網上找在線格式轉換工具或者圖片縮小工具修改圖片。
圖片過大會影響代碼審核和小程序工作效率,尤其是加載。

  • 背景圖設置

   背景圖即某個VIEW的背景圖片,比如滾動圖,目前僅支持url方式的圖片。
   詳見博客:http://blog.csdn.net/huangmeimao/article/details/75513508
   當然,你在開發(fā)工具中調試時,本地圖片做背景圖也是可以的,但是手機上預覽會看不到圖片。
   提供圖片存儲的服務器有很多,自己找個地方存好,獲取URL就可以了。比如CSDN,七牛。

  • 布局控件自適應

自適應就是你的布局不管在什么手機上都能顯示,布局隨手機屏幕大小進行縮小和放大。
只要把所有的尺寸相關單位修改為rpx即可,有時候你下載的Demo可能有其他尺寸單位,比如px,rem.
  轉換公式:
  1px=2rpx
  1rem約等于35rpx


  • 標題欄、導航欄、狀態(tài)欄、窗口

它們的格式在app.json的windows里設置,比如:


"window":{   "backgroundColor":"#f4f4f4",   "backgroundTextStyle":"light",    "navigationBarBackgroundColor":"#FF5722",    "navigationBarTitleText": "智能生活寶",   "navigationBarTextStyle":"#FFFFFF"  },


詳細說明見:

除了windows里定義的屬性,其他的格式是不可以修改的。
比如,標題欄中有無回退鍵,關閉鍵等。

----------導航欄可以通過tabBar設置多個導航,但僅可以指定頁面、圖標,字體等。位置什么的就不要考慮了。最少配置2個,最多配置五個。
比如下面配置了頁面和幫助兩個導航欄:

"tabBar":{    "color": "#959394",    "selectedColor":"#959394",    "backgroundColor":"#f0f0f0",    "borderStyle": "white",    "list": [      {        "pagePath":"pages/index/index",        "iconPath":"pages/images/home_b.png",        "selectedIconPath":"pages/images/home.png",        "text": "首頁"      },      {        "pagePath":"pages/components/mine/mine",        "iconPath":"pages/images/mine_b.png",        "selectedIconPath":"pages/images/mine.png",        "text": "幫助"      }    ]  },
效果圖如下:





  • 圖片導航到頁面

       可以給圖片或者圖片所在的View設置事件,比如bindtap,然后在事件處理函數(shù)里調用設置導航的API函數(shù):
wx.navigateTo({
      url:"../components/general/general?code=menu"
})
“?”后面是提供給頁面的參數(shù)名稱和值。


  • 多個頁面功能相似時的處理

當多個頁面的布局相同,處理方式也相同,只是要處理的數(shù)據(jù)不同時,就可以僅寫一個公共頁面,其他控件導入頁面時,通過傳入不同的參數(shù)進行區(qū)分。
wx.navigateTo({
      url:"../components/general/general?code=menu"
})
比如,上面在導航時,傳入的參數(shù)code指明是menu 類型。
詳細可參考博客:http://blog.csdn.net/huangmeimao/article/details/76418753

里面提供的代碼中general頁面就是一個公共頁面。


  • 圖片和文字等多個空間同時觸發(fā)一個事件

如果你希望再同一個View中的圖片和文字或者其他控件觸摸時都觸發(fā)同一個事件,直接把這個事件放在view的配置里。

  • Text/textarea 焦點控制

Text/textarea控件僅用來顯示數(shù)據(jù)時,要關掉自動聚焦,否則你所在頁面時,點擊控件就會自動彈出鍵盤。
屬性auto-focus不設置或者值為 false即可。

  • 文本滾動

      若需要顯示的文本內容大于文本框,能夠自動出現(xiàn)滾動條,而不是放大文本框。
參考博客:
http://blog.csdn.net/huangmeimao/article/details/76408327

  • 表格制作

參考博客:http://blog.csdn.net/huangmeimao/article/details/76038974

  • Input控件輸入文字清空

請參考博客:http://blog.csdn.net/huangmeimao/article/details/74936966

5   模板下載和使用
剛開始可以去網上找一些免費的Demo學習一下,事半功倍。

6   發(fā)布
當你確定你的小程序沒有什么問題了,至少功能完善,沒有嚴重bug.
可以開始發(fā)布。

  • 上傳代碼

發(fā)布之前必須先上傳代碼,上傳方式請參考第2節(jié)。

  • 提交審核

登錄微信公眾平臺->開發(fā)管理



圖中開發(fā)版本即你最后一次上傳的版本,點擊“提交審核”之后,就會在審核版本中看到。一般個人審核需要1到3天吧,反正我的最長是3天,且中間有周末。最短的不到兩小時。
提交審核后,若還沒有進入審核系統(tǒng),可以撤回審核。
審核通過后你會在管理員微信收到審核通過通知,當然微信公眾號也可以查詢。
審核通過后,需要你登錄微信公眾號手動點擊發(fā)布,才會再線上版本中顯示,這時用戶就可以使用了。
7   推廣
  • 登錄微信公眾號->推廣->修改關鍵詞

每個人可以寫10個關鍵詞,以便用戶在搜索公眾號時可以搜到你的小程序

  • 二維碼

分享你的二維碼圖給用戶
登錄微信公眾號->設置,下載二維碼


  • 通過公眾號關聯(lián)

如果你有其他公眾號,也可以在其他公眾號里關聯(lián)你的小程序。

8   數(shù)據(jù)查看   
登錄微信公眾號->數(shù)據(jù)分析,可以看到小程序各頁面的訪問情況和人數(shù),轉載等信息。


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://www.xiuhaier.com/wxmini/doc/course/21601.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×