宝石探秘6
歡迎您訪問南京安優網絡官方網站,本公司專注于:網站制作、小程序開發、網站推廣。 24小時服務熱線:400-8793-956
當前位置:南京網站制作公司 > 資訊中心 > 網站知識
南京小程序開發分享KIJI日報微信小程序版的開發實例
來源:南京網站制作 時間:2019-06-04 08:54:51

下面先跟著南京小程序開發先看看效果。

開發環境準備
 
小程序出來后第二天破解了。第三天,微信下載了開發工具。現在只需下載微信開發者工具即可使用。

創建項目時,請選擇no appid,因此不會對appid進行驗證。
 
目錄結構

1. App.js注冊應用程序邏輯,App.wxss全局樣式文件App.json配置信息
 
2.頁面存儲頁面文件
 
3. Utls工具類代碼
 
4.圖像圖像資源文件
 
applet中的每個頁面都有三個文件。wxml。wxss。js,對應于結構,樣式和邏輯,它對應于網頁中HTML CSS和JS之間的關系。
 
開發第一頁
 
來自新項目的代碼
 
 
<!--index.wxml-->
<view>
 <view bindtap="bindViewTap">
 <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
 <text>{{userInfo.nickName}}</text>
 </view>
 <view>
 <text>{{motto}}</text>
 </view>
</view>
 
/**index.wxss**/
.userinfo {
 display: flex;
 flex-direction: column;
 align-items: center;
}
 
.userinfo-avatar {
 width: 128rpx;
 height: 128rpx;
 margin: 20rpx;
 border-radius: 50%;
}
 
.userinfo-nickname {
 color: #aaa;
}
 
.usermotto {
 margin-top: 200px;
}
//index.js
// Get application examples
var app = getApp()
Page({
 data: {
 motto: 'Hello World',
 userInfo: {}
 },
 // Event Handler
 bindViewTap: function() {
 wx.navigateTo({
  url: '../logs/logs'
 })
 },
 onLoad: function () {
 console.log('onLoad')
 var that = this
 // Call the method of application instance to get global data
 app.getUserInfo(function(userInfo){
  // Update data
  that.setData({
  userInfo:userInfo
  })
 })
 }
})
在新項目中,您將看到索引下的代碼,然后我們將分別介紹wxml wxss JS。
 
wxml
 
這是頁面結構的描述文件,主要用于以下內容
 
1.使用<view> </ view>以標簽形式指定組件。
 
2.使用wx:for wx:if和其他指令在模板上完成一些邏輯處理
 
3.綁定綁定事件*
 
wxss
 
樣式文件,基本上與CSS語法相同,但支持的選擇器語法在這里受到限制,您可以使用flexbox來完成布局。
 
在內部,導入命令也可用于導入外部樣式文件。
 
 
@import "common.wxss";
 
.pd {
 padding-left: 5px;
}
JS
 
頁面邏輯控制,遵循commonJs規范
 
 
// util.js
function formatTime(date) {
 // ....
}
 
function formatDate(date, split) {
 // ...
}
module.exports = {
 formatTime: formatTime,
 formatDate: formatDate
}
var utils = require('../../utils/util.js')
這里的JS不是在瀏覽器環境中運行,所以windows。*代碼會報錯,不允許DOM操作,官方似乎不能支持其他JS庫運行,完全封閉,以后應該逐步改進。
 
使用頁面上的Page方法注冊頁面
 
Page({
 data:{
 // Text: "This is a page"
 },
 onLoad:function(options){
 // Parameters of page initialization options for page jumps
 },
 onReady:function(){
 // Page Rendering Completed
 },
 onShow:function(){
 // Page display
 },
 onHide:function(){
 // Page Hiding
 },
 onUnload:function(){
 // Page closure
 }
})
當我們需要更改綁定數據時,我們必須先調用setData方法來修改它,然后才能觸發頁面更新,如下所示:
 
Page({
 data: {
  Text:'This is a page'
 },
 onLoad: function() {
  this.setData({
   text: 'this is page'
  })
 }
})
條件渲染和列表渲染
 
以下內容來自微信的官方文件。
 
小程序使用wx:if=""完全條件渲染,類似于vue的V-IF
 
 
<view wx:if="{{condition}}"> True </view>
它也可以使用。wx:elif并wx:else 添加一個else塊:
 
 
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
wx:for控件屬性綁定到一個數組,該數組可用于使用數組中的數據重復呈現組件。
 
內置變量索引(下標到數組遍歷),item(每個數組遍歷項)
 
 
<view wx:for="{{items}}">
 {{index}}: {{item.message}}
</view>
Page({
 items: [{
 message: 'foo',
 },{
 message: 'bar'
 }]
})
用法wx:for-item可以指定數組當前元素的變量名
 
使用wx:for-index您可以指定數組當前下標的變量名稱:
 
 
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
 {{idx}}: {{itemName.message}}
</view>
事件綁定
 
Wxml只是使用了bind[eventName]="handler" 語法綁定事件
 
 
<view bindtap="bindViewTap"><text>tap</text></view>
Page({
 bindViewTap: function(e) {
  console.log(e.taget)
 }
})
采用data-*和e.target.dateset 傳遞參數
 
<view bindtap="bindViewTap" data-test-msg="la la la la la la la la la la"><text>tap</text></view>
Page({
 bindViewTap: function(e) {
  // Will automatically change to hump naming
  Console. log (e. taget. dataset. testMsg) // / la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la
 }
})
目前被踩踏的坑
 
事件綁定 e.target.dataset
 
當父組件綁定事件和參數并單擊時,子組件會冒泡到父組件,這次是e.target.dataset Empty
 
<view bindtap= "bindViewTap" data-test-msg= "Lala la la la la la la la la la la la la la">
 <view><text>tap</text></view>
</view>
Page({
 bindViewTap: function(e) {
  console.log(e.taget.dataset.testMsg) // undefined
 }
})
在線圖片加載不穩定
 
我們還有很多需要從互聯網上下載的圖片。此處的圖像組件顯示非常不穩定,并且無法顯示許多圖像。
 
摘要
 
微信小程序還處于內部測試階段,還有很多問題需要改進,但對于開發速度和體驗還是不錯的,期待當天正式發布。以上是南京小程序開發今天帶來的全部內容。我希望您學習如何使用微信小程序對您有所幫助。

本文地址:http://www.ib-si.com/web/2527.html
Tag:
專業服務:南京網站制作,南京網站制作公司,南京網站建設公司
聯系電話:025-65016872
上一篇: 了解跳出率:如何衡量,審核和改進
下一篇: 返回列表
最新案例
泰杰賽
泰杰賽
蘇派教育
蘇派教育
全國大學生公共衛生大賽
全國大學生公共衛生大賽
南京德普筒倉建安工程有限公司
南京德普筒倉建安工程有限公司
中國非金屬材料南京礦山工程有限公司
中國非金屬材料南京礦山工程有限公司
你可能感興趣
品牌內容與公平內容:您應該使用哪種內容?
如何通過6個步驟推出新品牌標識
您是否應該重新設計網站?
如何設計行為流程來關閉您網站上的潛在客戶
小程序紅利率先惠及四大行業,下一處去哪掘金?
4個在您的網站上使用的B2B銷售技巧
您應該為您的企業選擇哪種電子商務平臺?
SEO初學者問答 - 第1部分
最后更新
南京小程序開發分享KIJI日報微信小程序版的開發實例 了解跳出率:如何衡量,審核和改進 常見的網頁設計語言,他們做什么以及為什么需要他們 2019年更好的用戶體驗(UX)設計 在2019年實現UX閃耀的7種方法 如何在2019年成功開展在線業務的3種方法 如何創建有效的登陸頁面 - 終極指南 網站設計的5個最佳實踐(和3個可怕的)
服務項目
南京網站制作 營銷型網站 微信營銷 IDC網站 精品案例
宝石探秘6 网上买大小单双平台合法么 二人麻将游戏规则 北京pk10计划在线计划 汇聚在线彩票平台 免费北京麻将游戏 快三倍投怎么合理 pk10看走势图技巧 广东快乐十分辅助软件 抢庄牛牛技巧什么牌型 时时彩一星最稳办法 财神爷pk10计划破解版 重庆时时走势图个位 双式投注 北京pk10全天计划