體驗(yàn)支付寶小程序開發(fā)~

testHs 發(fā)布于2019-08-26 18:42 / 1457人閱讀

摘要：背景這一個(gè)月都在用開發(fā)一個(gè)價(jià)簽項(xiàng)目現(xiàn)在項(xiàng)目功能完成了一半后接到新的要求用支付寶小程序開發(fā)一個(gè)頁(yè)面出來(lái)頁(yè)面上就兩個(gè)掃描功能一個(gè)按鈕提交功能于是乎我就開始了學(xué)習(xí)支付寶小程序開發(fā)體驗(yàn)支付寶小程序開發(fā)第一天首先我下載了小程序開發(fā)者工具然后創(chuàng)建了一個(gè)

背景:這一個(gè)月都在用Ant Design pro v2開發(fā)一個(gè)價(jià)簽項(xiàng)目.現(xiàn)在項(xiàng)目功能完成了一半后接到新的要求.用支付寶小程序開發(fā)一個(gè)app頁(yè)面出來(lái).頁(yè)面上就兩個(gè)掃描功能,一個(gè)按鈕提交功能.于是乎我就開始了學(xué)習(xí)支付寶小程序開發(fā).

體驗(yàn)支付寶小程序開發(fā)第一天~

首先我下載了小程序開發(fā)者工具.然后創(chuàng)建了一個(gè)項(xiàng)目.這些流程在官網(wǎng)都有.我就不廢話了.
講講我遇到的問題吧. 因?yàn)槭堑谝淮谓佑|,所以我不知道該用什么組件去寫,后面發(fā)現(xiàn)它有自帶的組件.嗯.很省事.而且和react native很相似.之前用過(guò)RN一段時(shí)間,所有用起來(lái)還好.沒有那么的無(wú)從下手.當(dāng)然也沒6哪里去~~~

項(xiàng)目打開就是這樣的界面

右上角有個(gè)這個(gè)按鈕,打開是這樣的,可以搜索組件的

如果你不知道原來(lái)用過(guò)的組件這個(gè)開發(fā)者工具是否能使用的話你可以在這個(gè)輸入組件名的地方去搜索.有的話就是能用的咯.

上面有個(gè)真機(jī)調(diào)試,我用了一個(gè)下午,感覺還蠻好用的.就是生成個(gè)二維碼,然后支付寶掃描一下.你的支付寶就會(huì)打開一個(gè)小程序.代碼有改動(dòng)的時(shí)候手機(jī)頁(yè)面就會(huì)隨之改動(dòng).

小程序打開后就是這樣:

這個(gè)頁(yè)面比較簡(jiǎn)單.就兩個(gè)掃描功能,兩個(gè)輸入框.一個(gè)確定按鈕.
功能就是:點(diǎn)擊請(qǐng)掃描商品編號(hào)的時(shí)候打開了手機(jī)的相機(jī).掃描出來(lái)的編號(hào)會(huì)填入掃描后的商品編號(hào)的位置.點(diǎn)擊提交的時(shí)候會(huì)獲取到輸入框的內(nèi)容.

還是介紹一下目錄吧.如圖所示:

我的代碼就是在todos里面寫的. #todos.acss就是寫樣式的.<>todos.axml里面寫的是標(biāo)簽內(nèi)容.JS就是代碼邏輯.{}todos.json里面路由.

更改小程序背景色的位置在#app.acss

最后附上代碼:

這是.js的代碼.

// 獲取全局 app 實(shí)例
const app = getApp();

Page({
  // 聲明頁(yè)面數(shù)據(jù)
  data: {
    tag:"",
    goods:"",
    inputValue: "",
  },
  // 監(jiān)聽生命周期回調(diào) onLoad
  onLoad() {
    // 獲取用戶信息并存儲(chǔ)數(shù)據(jù)
    app.getUserInfo().then(
      user => {
        this.setData({
          user,
        });
      },
      () => {
        // 獲取用戶信息失敗
      }
    );
  },
  // 監(jiān)聽生命周期回調(diào) onShow
  onShow() {
    // 設(shè)置全局?jǐn)?shù)據(jù)到當(dāng)前頁(yè)面數(shù)據(jù)
    this.setData({ todos: app.todos });
  },
  // 事件處理函數(shù)
  onTodoChanged(e) {
    // 修改全局?jǐn)?shù)據(jù)
    const checkedTodos = e.detail.value;
    app.todos = app.todos.map(todo => ({
      ...todo,
      completed: checkedTodos.indexOf(todo.text) > -1,
    }));
    this.setData({ todos: app.todos });
  },

  //掃描獲取商品編號(hào)
  scanGoods() {
      my.scan({
        type: "qr",
        success: (res) => {
          // my.alert({ title: res.code });
          this.setData({ goods: res.code});
          // console.log("res====goods====",this.data.goods)
        },
        fail:(res)=>{
          cosole.log("res---",res)
        }
      });
    },

  //掃描獲取價(jià)簽編號(hào)
  scanTag() {
      my.scan({
        type: "qr",
        success: (res) => {
          // my.alert({ title: res.code });
          this.setData({ tag: res.code});
          // console.log("res=---tag-----==",this.data.tag)
        },
        fail:(res)=>{
          cosole.log("res---",res)
        }
      });
    },

  //掃描后的商品編號(hào)
  bindKeyInput(e) {
    this.setData({
      goods: e.detail.value,
    });
  },

  //掃描后的價(jià)簽編號(hào)
  bindKeyInput1(e) {
    this.setData({
      tag: e.detail.value,
    });
  // console.log("inputValue---===========--------------",this.data.inputValue)
  },
  //點(diǎn)擊提交按鈕
  onSubmit() {
    console.log("商品編號(hào)-------",this.data.goods)
    console.log("價(jià)簽編號(hào)-------",this.data.tag)
  },
  
});

這是<>todos.axml的代碼.

主要的就是這兩塊兒的代碼.樣式是自己寫的,但是寫的太丑了~不好意思拿出來(lái)了~ 命名啥的也不太規(guī)范~ 以后還是要注意些~

說(shuō)說(shuō)我踩的坑把:
第一個(gè)坑:我把這個(gè)小程序開發(fā)者工具,裝到了D盤,然后我想找代碼保存的位置始終找不到.網(wǎng)上搜也沒有搜到代碼是存在哪里的~ 唉,最后在小程序開發(fā)者工具的文件,切換項(xiàng)目的位置找到了這個(gè)~~~ 好吧,最終還是找到了.

第二個(gè)坑:關(guān)于書寫問題,這個(gè)小程序開發(fā)者工具沒有自動(dòng)提示代碼書寫問題等等,(也可能是我自己沒有設(shè)置代碼檢查)有時(shí)候會(huì)多打出來(lái)一個(gè)>,要注意刪掉.不然也不會(huì)報(bào)錯(cuò),但是效果始終運(yùn)行不出來(lái).所以遇到問題要仔細(xì)檢查自己的代碼.
第三個(gè)坑:提交按鈕.用form標(biāo)簽包起來(lái)的時(shí)候.在按鈕上寫樣式的話按鈕會(huì)消失的!!一定要再用個(gè)view把form和button都包起來(lái).然后在view上面去寫樣式.嗯,我也不知道是為什么,反正是我自己試出來(lái)的.