體驗支付寶小程序開發~

testHs 發布于2019-08-26 18:42 / 1451人閱讀

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

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

體驗支付寶小程序開發第一天~

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

項目打開就是這樣的界面

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

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

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

小程序打開后就是這樣:

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

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

我的代碼就是在todos里面寫的. #todos.acss就是寫樣式的.<>todos.axml里面寫的是標簽內容.JS就是代碼邏輯.{}todos.json里面路由.

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

最后附上代碼:

這是.js的代碼.

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

Page({
  // 聲明頁面數據
  data: {
    tag:"",
    goods:"",
    inputValue: "",
  },
  // 監聽生命周期回調 onLoad
  onLoad() {
    // 獲取用戶信息并存儲數據
    app.getUserInfo().then(
      user => {
        this.setData({
          user,
        });
      },
      () => {
        // 獲取用戶信息失敗
      }
    );
  },
  // 監聽生命周期回調 onShow
  onShow() {
    // 設置全局數據到當前頁面數據
    this.setData({ todos: app.todos });
  },
  // 事件處理函數
  onTodoChanged(e) {
    // 修改全局數據
    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的代碼.

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

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

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

云服務器 GPU云服務器支付寶體驗版小程序開發開發小程序開發小程序開發開發制作

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110318.html

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

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

red_bricks 2019-08-26 10:43 評論0 收藏0
開發支付寶小程序無從下手？我們給你創造了一條捷徑

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

biaoxiaoduan 2019-08-23 15:21 評論0 收藏0
Antmove 緣起 - 好用的小程序多端解決方案

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

crelaber 2019-08-26 10:32 評論0 收藏0
阿里20億小程序繁星計劃你最需要知道的幾個問題（0325更新）

摘要：月日，在阿里云峰會北京站上，阿里巴巴旗下的阿里云支付寶淘寶釘釘高德等聯合發布阿里巴巴小程序繁星計劃提供億元補貼，扶持萬小程序開發者萬商家。會上，阿里云正式發布了小程序云。看到繁星計劃已上熱搜。通過小程序云服務可以極大的降低交付部署成本。3月21日，在2019阿里云峰會·北京站上，阿里巴巴旗下的阿里云、支付寶、淘寶、釘釘、高德等聯合發布阿里巴巴小程序繁星計劃：提供20億元補貼，扶持200萬+小...

lansheng228 2019-04-24 19:47 評論0 收藏0
小程序跨平臺開發解決方案探索

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

xiangzhihong 2019-08-26 10:30 評論0 收藏0