小程序開發(fā)心得(一)

第一次正式開發(fā)一個小程序檬寂,就從以下幾個方面來談一談小程序的開發(fā)過程和心得吧,主要說說這次項目中用到的功能捣作。

  • 數(shù)據(jù)請求

這次的小程序,沒有太多的附加功能浦辨,所以數(shù)據(jù)以及對數(shù)據(jù)的處理是這次的主體工作,小程序向用戶提供API,供用戶向自己的服務(wù)器請求數(shù)據(jù),值得一提的是友浸,開發(fā)小程序之前峰尝,需要先在微信公眾平臺申請appID偏窝,并且綁定域名,域名必須是https協(xié)議武学,然后在小程序的開發(fā)工具的配置信息中完善信息祭往,請求的地址需要在前面綁定的域名下。這個項目中用到wx.request從服務(wù)器拉取數(shù)據(jù)火窒。

wx.request({
    url: that.data.couponData.requestUrl,
    data: that.data.couponData.queryData,
    header: {
        'content-type': 'application/json'
    },
    success: function(res) {
        var list = res.data.goodsList;
        console.log(res.data);
        for(var i in list) {
            list[i].quanUsedNum = parseInt(list[i].quanTotalNum) - parseInt(list[i].quanRemainNum);
            list[i].isImgRendered = false;
        }
        list[0].isImgRendered = list[1].isImgRendered = list[2].isImgRendered = list[3].isImgRendered = true;
        that.setData({"couponData.totalPage":res.data.totalPage});
        that.setData({"couponData.list":that.data.couponData.list.concat(list)});
        that.setData({"couponData.loadmore":!that.data.couponData.loadmore});
        that.setData({"couponData.queryData.pageNum":parseInt(that.data.couponData.queryData.pageNum) + 1});
        if(that.data.couponData.queryData.pageNum > that.data.couponData.totalPage) {
            that.setData({"couponData.isAction":false});
        }

        if(that.data.couponData.list.length < 1) {
            that.setData({"couponData.nodata":true});
        }
        if(f) {
            f();
        }
    }
});
  • 數(shù)據(jù)緩存

這里使用數(shù)據(jù)緩存是因為需要做一個搜索功能硼补,就涉及到頁面之間的數(shù)據(jù)傳遞,放在地址中也是一種方法熏矿,借用一下localStorage也可以已骇,使用wx.setStorage將數(shù)據(jù)存儲到localStorage中,頁面跳轉(zhuǎn)之后票编,在從localStorage中讀取就可以了褪储,讀取數(shù)據(jù)的時候分同步讀取和異步讀取。

  • 剪切板的應(yīng)用

    借用小程序的API可以很方便的將任何信息復(fù)制到剪切板慧域,然后就可以粘貼了鲤竹。

      wx.setClipboardData({
          data: '【' + that.data.couponData.list[e.currentTarget.id].goodsTitle + '】復(fù)制這條信息,打開【手機(jī)淘寶】' + that.data.couponData.list[e.currentTarget.id].twoInOneKouling,
          success: function(res) {
              that.setData({"couponData.copyTip":true,"couponData.Kouling":that.data.couponData.list[e.currentTarget.id].twoInOneKouling})
          }
      });
    
  • 模板
    在這個項目中昔榴,頁面基本很相似辛藻,但有細(xì)微差別碘橘,所以就使用了模板,新建一個template/template.wxml吱肌,name屬性必須要設(shè)置痘拆。

      <template name='navsearch'>
      <view class='nav-search'>
          <view class='nav-search__container space-between'>
              <view class='nav-search__search' wx:if='{{isSearch}}'></view>
              <input class='nav-search__input' placeholder='請輸入關(guān)鍵詞找券' name='queryStr' value="{{queryStr}}" bindfocus='toggleSearch' bindconfirm='doQuery' bindinput="syncQuery"/>
              <view class='nav-search__delete' wx:if='{{!isSearch}}' bindtap='deleteAll'></view>
              <view class='nav-search__btn center' wx:if='{{!isSearch}}' bindtap='doQuery'>搜索</view>
          </view>
    
          <view class='nav-filter' bindtap='toggleFilter'></view>
      </view>
      </template>
      
      <!--在其他文件中使用模板-->
      <import src="/template/template.wxml" />
      <template is='navsearch' data="{{...couponData}}"></template>
    
  • 模塊化

    對于公共的js可以寫在一個專門的js文件中,然后使用module.exports暴露接口氮墨。
    通用的js文件使用require引入错负。

      var common = require('../../common/common.js');
      ...
      common.f(); //調(diào)用
    
  • redirectTo & navigateTo

    redirectTo是重定向至某頁面,navigateTo是打開新的頁面勇边,值得說明的一點是犹撒,使用navigateTo打開的頁面太多會導(dǎo)致小程序卡頓。

  • 分享

      Page({
          onShareAppMessage: function () {
              return {
                  title: 'your title粒褒!',
                  path: '/xxxx/xxxx/xxxx',   //分享之后回到這個頁面
                  success: function(res) {
                      f(); //成功回調(diào)识颊;
                  },
                  fail: function(res) {
                     f(); //失敗回調(diào);
                      
                  }
              }
          }
      })
    
  • 提高列表滑動的流暢性

    簡而言之就是頁面滾動到哪里奕坟,列表中的圖片就顯示到哪里祥款,實現(xiàn)方法如下。

      //js文件
      Page({
          loadImg:function(e) {
              //計算接下來加載哪幾張
              var index = Math.floor((e.detail.scrollTop - 8)/259.5);
              var temp = this.data.couponData.list; //完整的列表
              var min = Math.max(index * 2,0),max = Math.min(index * 2 + 8,temp.length);
              for(var i = min; i < max; i ++) {
                  if(temp[i] && !temp[i].isImgRendered) {
                      temp[i].isImgRendered = true; //列表中的每一項有一個標(biāo)記是否加載圖片的的屬性月杉,默認(rèn)false刃跛,隨著頁面滾動,一個個變成true苛萎。
                  }
              }
              this.setData({"couponData.list":temp});
              temp = null;
          },
      })
      
      //wxml文件中在scroll-view上綁定事件桨昙。
      <scroll-view class="section" scroll-y="true" bindscroll='loadImg'></scroll-view>
    
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市腌歉,隨后出現(xiàn)的幾起案子蛙酪,更是在濱河造成了極大的恐慌,老刑警劉巖翘盖,帶你破解...
    沈念sama閱讀 217,907評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件桂塞,死亡現(xiàn)場離奇詭異,居然都是意外死亡馍驯,警方通過查閱死者的電腦和手機(jī)阁危,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,987評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來汰瘫,“玉大人狂打,你說我怎么就攤上這事∫髁撸” “怎么了菱父?”我有些...
    開封第一講書人閱讀 164,298評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我浙宜,道長官辽,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,586評論 1 293
  • 正文 為了忘掉前任粟瞬,我火速辦了婚禮同仆,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘裙品。我一直安慰自己俗批,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,633評論 6 392
  • 文/花漫 我一把揭開白布市怎。 她就那樣靜靜地躺著岁忘,像睡著了一般。 火紅的嫁衣襯著肌膚如雪区匠。 梳的紋絲不亂的頭發(fā)上干像,一...
    開封第一講書人閱讀 51,488評論 1 302
  • 那天,我揣著相機(jī)與錄音驰弄,去河邊找鬼麻汰。 笑死,一個胖子當(dāng)著我的面吹牛戚篙,可吹牛的內(nèi)容都是我干的五鲫。 我是一名探鬼主播,決...
    沈念sama閱讀 40,275評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼岔擂,長吁一口氣:“原來是場噩夢啊……” “哼位喂!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起智亮,我...
    開封第一講書人閱讀 39,176評論 0 276
  • 序言:老撾萬榮一對情侶失蹤忆某,失蹤者是張志新(化名)和其女友劉穎点待,沒想到半個月后阔蛉,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,619評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡癞埠,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,819評論 3 336
  • 正文 我和宋清朗相戀三年状原,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片苗踪。...
    茶點故事閱讀 39,932評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡颠区,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出通铲,到底是詐尸還是另有隱情毕莱,我是刑警寧澤,帶...
    沈念sama閱讀 35,655評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站朋截,受9級特大地震影響蛹稍,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜部服,卻給世界環(huán)境...
    茶點故事閱讀 41,265評論 3 329
  • 文/蒙蒙 一唆姐、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧廓八,春花似錦奉芦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,871評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至宠叼,卻和暖如春减噪,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背车吹。 一陣腳步聲響...
    開封第一講書人閱讀 32,994評論 1 269
  • 我被黑心中介騙來泰國打工筹裕, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人窄驹。 一個月前我還...
    沈念sama閱讀 48,095評論 3 370
  • 正文 我出身青樓朝卒,卻偏偏與公主長得像,于是被迫代替她去往敵國和親乐埠。 傳聞我的和親對象是個殘疾皇子抗斤,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,884評論 2 354

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)丈咐,斷路器瑞眼,智...
    卡卡羅2017閱讀 134,656評論 18 139
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,129評論 25 707
  • 給提問的開發(fā)者的建議:提問之前先查詢 文檔、通過社區(qū)右上角搜索搜索已經(jīng)存在的問題棵逊。 寫一個簡明扼要的標(biāo)題伤疙,并且...
    極樂叔閱讀 13,437評論 0 3
  • 微信小程序在無論在功能、文檔及相關(guān)支持方面辆影,都是優(yōu)于前面幾種微信賬號類型徒像,它提供了很多原生程序才有的接口,使得我們...
    未央大佬閱讀 2,299評論 0 12
  • 1 目的將hadoop 2.7.1 安裝到 166蛙讥、167锯蛀、168 三臺機(jī)器上2 提供環(huán)境練習(xí)環(huán)境192.168....
    灼灼2015閱讀 3,399評論 4 40