微信小程式原始碼分享—智慧小蜜

微信小程式原始碼分享—智慧小蜜

(本文源地址:http://blog.csdn.net/u011827504/article/details/77164245)

下面是微信小程式二維碼,歡迎大家掃碼體驗!

智慧小蜜-原始碼下載:http://download.csdn.net/download/u011827504/9937603

1、詳細介紹:

1、開發過程中常見問題:

1)、從檢視層到邏輯層的資料傳遞。詳情可參考微信小程式—事件

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

Page({
tapName: function(event) {
console.log(event)
}
})

其中event的資訊如下:

{
"type":"tap",
"timeStamp":895,
"target": {
"id": "tapTest",
"dataset":  {
"hi":"WeChat"
}
},
"currentTarget":  {
"id": "tapTest",
"dataset": {
"hi":"WeChat"
}
},

2)、currentTarget 與 target的區別。微信小程式—冒泡/非冒泡事件

target:觸發事件的源元件。

currentTarget:事件繫結的當前元件

如以下例子中,點選 inner view 會先後觸發handleTap3和handleTap2(因為tap事件會冒泡到 middle view,而 middle view 阻止了 tap 事件冒泡,不再向父節點傳遞),點選 middle view 會觸發handleTap2,點選 outter view 會觸發handleTap1。

<view id="outter" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>

3)、做微信小程式時,要嚴格遵守小程式稽核標準,注意:特殊行業所需資質材料

2、小程式效果圖如下:

1)、首頁:

a、支援天氣查詢(使用modal元件顯示彈出框修改城市);

main.wxml

  <modal title="請輸入城市名" hidden="{{modalHidden}}" bindconfirm="modalConfirm" bindcancel="modalCancel">
<view class="setcity">
<image style="width: 40px; height: 40px; " mode="aspectFit" src="../../image/city.png"></image>
<input class="input" placeholder="點此手動輸入" placeholder-style="color:#6aa84f" maxlength="10" confirm-type="send" bindblur="bindConfirmControl" />
</view>
</modal>

main.js

  modalConfirm: function (options) {
var self = this;
self.setData({
modalHidden: true
});
var city = wx.getStorageSync("city")
if (typeof city != 'undefined' && city != ''){
NliProcess("今天"   city   "的天氣", self);
}
},
modalCancel: function (options) {
var self = this;
self.setData({
modalHidden: true
});
wx.clearStorage();
},
bindConfirmControl: function (e) {
var inputTxt = e.detail.value;
if (inputTxt != '')
wx.setStorageSync("city", inputTxt);
}

b、支援導航到子頁面詩詞、日曆、數學、單位轉換、24點遊戲。

main.js

appClick: function (options) {
var id = options.currentTarget.dataset.id;
wx.navigateTo({
url: '../detail/detail?id='   id
})
}

main.wxml

<view class="list">
<block wx:for="{{app_display}}">
<view class="text-app" data-id="{{item.num}}" bindtap="appClick">
<image class="img" style="width: 60px; height: 60px; " mode="widthFix" src="{{item.imgurl}}"></image>
<text class="text-app-info">{{item.display}}</text>
</view>
</block>
</view>

2)、支援搜尋詩詞、日曆、數學、單位轉換、24點遊戲(使用radio元件實現單項選擇器)。

從main頁跳轉到detail頁時,傳的引數“id”可在detail.js的onLoad方法中獲得。由id(即checkedno)值來設定radio的初始選項。

detail.js

onLoad: function (options) {
var self = this;
checkedno = options.id;  
self.setData({
checkedno: checkedno,
failTxt: expList[checkedno]
})   
}

detail.wxml

<radio-group class="radio-group" bindchange="radioChange">
<label class="radio" wx:for="{{radioitems}}">
<radio value="{{item.name}}" checked="{{index == checkedno}}"/>{{item.value}}
</label>
</radio-group>

3)、支援看笑話、故事。

4)、支援查百科。

icon元件type值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear。這裡用的search型別。

baike.wxml

  <view class="text-search">
<icon type="search" size="25" color="blue" class="searchIcon" />
<input class="input" placeholder-style="color:#6aa84f" maxlength="50" placeholder="點此手動輸入" value="{{inputTxt}}" confirm-type="send" bindconfirm="bindConfirmControl" bindfocus="bindFocusClear" />
</view>

5)、使用元件swiper實現圖片輪播。

other.wxml

<swiper indicator-dots="true" autoplay="true" interval="4000" duration="2000">
<swiper-item>
<image src="../../image/img1.png" class="slide-image"/>
</swiper-item>
<swiper-item>
<image src="../../image/img2.png" class="slide-image"/>
</swiper-item>
<swiper-item>
<image src="../../image/img3.png" class="slide-image"/>
</swiper-item>
<swiper-item>
<image src="../../image/img4.png" class="slide-image"/>
</swiper-item>
</swiper>

以下是背景圖片設定方式:

other.wxss

page{
background-image:url('https://img-blog.csdn.net/20170812173448986?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTgyNzUwNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center');
background-size: cover;
}


最後,分享一些不錯的開發微信小程式的經驗文章:

微信小程式開發步驟講解和實用小技巧

微信小程式開發——下拉重新整理的實現

微信小程式 清空或修改input值 的方法