小程序模板網(wǎng)

微信小程序基礎《二》新建項目文件詳細圖解,最簡單Demo設計 ... ...

發(fā)布時間:2018-03-29 18:36 所屬欄目:小程序開發(fā)教程
第一部分:新建的項目文件圖解

 

第二部分:最簡單的Demo設計使用

這個小Demo,代碼量不多:導航樣式、View、Text、點擊、JS交互的使用,主要是理解每個后綴文件的功能,然后才能更好的使用開發(fā).......(下面代碼和源代碼沒差別,實在想要的請留言,謝謝。。。)

首先在index.wxml中創(chuàng)建相關控件


					
  1. <!--創(chuàng)建一個背景為藍色的View,并且添加點擊事件,輸出啟動日志-->
  2. <view bindtap="bindViewTap" class="myView">
  3. <text class="myView-clickK">點我點我</text>
  4. </view>
  5.  
  6. <!--創(chuàng)建了一個text標簽,然后執(zhí)行了JS交互,在indexindex.js中進行賦值-->
  7. <view class="usermotto">
  8. <text class="user-motto">{{motto}}</text>
  9. </view>
  10. </view>

然后在index.wxss中設計控件位置和屬性樣式,


					
  1. /**rpx單位是微信小程序中css的尺寸單位,rpx可以根據(jù)屏幕寬度進行自適應。
  2. 規(guī)定屏幕寬為750rpx。如在 iPhone6 上,屏幕寬度為375px,共有750個物理像素,
  3. 則750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。開發(fā)建議:
  4. 開發(fā)微信小程序時設計師可以用 iPhone6 作為視覺稿的標準。UI設計圖建議:使用
  5. 設計稿使用設備寬度750px比較容易計算750px的話1rpx=1px,這樣的話,設計圖上量出
  6. 來的尺寸是多少px就是多少rpx**/
  7. .myView{
  8. width: 200rpx;
  9. height: 200rpx;
  10. margin-top: -100rpx;
  11. background-color: blue;
  12. }
  13. .myView {
  14. display: flex;
  15. flex-direction: column;
  16. align-items: center;
  17. width: 200rpx;
  18. height: 200rpx;
  19. margin: 20rpx;
  20. border-radius: 50%;
  21. }
  22. .myView-clickK {
  23. margin-top: 75rpx;
  24. height: 50rpx;
  25. color: red;
  26. }
  27. .usermotto {
  28. margin-top: 100rpx;
  29. }

涉及到交互功能,所以在index.js中,設置內(nèi)容


					
  1. data: {
  2. motto: 'Hello World,你好,世界!'
  3. },
  4. //事件處理函數(shù)
  5. bindViewTap: function() {
  6. wx.navigateTo({
  7. url: '../logs/logs'
  8. })
  9. },

設置導航樣式,需要在app.json中進行設置

效果展示:



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