亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

testHs / 1529人閱讀

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

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

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

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

項目打開就是這樣的界面

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

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

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

小程序打開后就是這樣:

這個頁面比較簡單.就兩個掃描功能,兩個輸入框.一個確定按鈕.
功能就是:點擊請掃描商品編號的時候打開了手機的相機.掃描出來的編號會填入掃描后的商品編號的位置.點擊提交的時候會獲取到輸入框的內(nèi)容.

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


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

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

最后附上代碼:

這是.js的代碼.

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

Page({
  // 聲明頁面數(shù)據(jù)
  data: {
    tag:"",
    goods:"",
    inputValue: "",
  },
  // 監(jiān)聽生命周期回調(diào) onLoad
  onLoad() {
    // 獲取用戶信息并存儲數(shù)據(jù)
    app.getUserInfo().then(
      user => {
        this.setData({
          user,
        });
      },
      () => {
        // 獲取用戶信息失敗
      }
    );
  },
  // 監(jiān)聽生命周期回調(diào) onShow
  onShow() {
    // 設(shè)置全局?jǐn)?shù)據(jù)到當(dāng)前頁面數(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 });
  },

  //掃描獲取商品編號
  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)
        }
      });
    },

  //掃描獲取價簽編號
  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)
        }
      });
    },

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

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

這是<>todos.axml的代碼.

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/110318.html

相關(guān)文章

  • 也許你并不需要第三方小程序框架

    摘要：所以在小程序出現(xiàn)之后，一股框架之風(fēng)也很快的出現(xiàn)，微信小程序剛推出之后，就出現(xiàn)了兩個比較出名的小程序開發(fā)框架，。 原文地址：https://ant-move.github.io/we... 這里說的去除小程序框架其實并不嚴(yán)謹(jǐn)，因為小程序本身也算是一個框架，而且是一個功能更加完善的框架系統(tǒng)。在前端的概念中，我們一般說一個框架是指一個用來幫助開發(fā)者構(gòu)建用戶界面的框架，而小程序框架本身不僅僅包...

    red_bricks 評論0 收藏0

  • 開發(fā)支付寶小程序無從下手？我們給你創(chuàng)造了一條捷徑

    摘要：即日起至月日公測活動期間，成功參與新版公測活動并接入支付寶小程序的用戶，可獲得個人版套餐個月價值元的免費使用資格。計劃的第一站我們選擇了支付寶小程序。支付寶以及其他平臺的小程序，在這個時代里，更加需要無服務(wù)器的開發(fā)方式。 作為國內(nèi)首家專注于小程序領(lǐng)域的后端云服務(wù)，知曉云正式開啟 3.0 計劃——全平臺 Serverless 服務(wù)。 「知曉云」cloud.minapp.com，誕生于 2...

    biaoxiaoduan 評論0 收藏0

  • Antmove 緣起 - 好用的小程序多端解決方案

    摘要：目前支持哪些平臺的搬家目前對外開放版本釋放了微信小程序轉(zhuǎn)支付寶小程序的功能，這也是我們在調(diào)研中發(fā)現(xiàn)需求最多的。從筆者的了解來看，微信小程序框架原理更接近于，而支付寶小程序更接近于。 原文地址： https://ant-move.github.io/we... 螞蟻搬家工具（Antmove）是一個小程序開發(fā)輔助工具，致力于解決小程序跨平臺開發(fā)的難題，借助于 Antmove，你只需要編寫...

    crelaber 評論0 收藏0

  • 阿里20億小程序繁星計劃你最需要知道的幾個問題（0325更新）

    摘要：月日，在阿里云峰會北京站上，阿里巴巴旗下的阿里云支付寶淘寶釘釘高德等聯(lián)合發(fā)布阿里巴巴小程序繁星計劃提供億元補貼，扶持萬小程序開發(fā)者萬商家。會上，阿里云正式發(fā)布了小程序云?？吹椒毙怯媱澮焉蠠崴?。通過小程序云服務(wù)可以極大的降低交付部署成本。3月21日，在2019阿里云峰會·北京站上，阿里巴巴旗下的阿里云、支付寶、淘寶、釘釘、高德等聯(lián)合發(fā)布阿里巴巴小程序繁星計劃：提供20億元補貼，扶持200萬+小...

    lansheng228 評論0 收藏0

  • 小程序跨平臺開發(fā)解決方案探索

    摘要：繼微信正式推出微信小程序后，各個大廠陸續(xù)發(fā)布了各自的小程序平臺支付寶小程序百度小程序頭條小程序，跨小程序平臺開發(fā)也成為了眾多小程序開發(fā)者要面臨的問題。 繼微信正式推出微信小程序后，各個大廠陸續(xù)發(fā)布了各自的小程序平臺 —— 支付寶小程序、百度小程序、頭條小程序，跨小程序平臺開發(fā)也成為了眾多小程序開發(fā)者要面臨的問題。 Antmove - 小程序跨平臺解決方案 小程序開發(fā)血淚史 小程序發(fā)展初...

    xiangzhihong 評論0 收藏0

發(fā)表評論

0條評論

testHs

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<