体验支付宝小程序开发

背景: 这一个月都在用 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 的代码.

<view class="page-todos">
  <view class="user">
    <image class="avatar" src="{{user.avatar ||'../../assets/logo.png'}}" background-size="cover"></image>
  </view>
  <view class="line">
    <view class="line1">
      <add-button text="请扫描商品编号" onClickMe="scanGoods"></add-button>
    </view>
  </view>
  <input class="input" placeholder="扫描后的商品编号" focus="{{focus}}" onFocus="onFocus" onBlur="onBlur" value="{{goods}}" onInput="bindKeyInput"/>
  <view class="line2">
    <add-button text="请扫描价签编号" onClickMe="scanTag"></add-button>
  </view>
</view>

<input class="input1" placeholder="扫描后的价签编号" focus="{{focus}}" onFocus="onFocus" onBlur="onBlur" value="{{tag}}" onInput="bindKeyInput1"/>
<view class="button">
  <form onSubmit="onSubmit">
    <button size="default" type="primary" form-type="submit" > 提交 </button>
  </form>
</view>
</view>

主要的就是这两块儿的代码. 样式是自己写的, 但是写的太丑了~ 不好意思拿出来了~ 命名啥的也不太规范~ 以后还是要注意些~

说说我踩的坑把:
第一个坑: 我把这个小程序开发者工具, 装到了 D 盘, 然后我想找代码保存的位置始终找不到. 网上搜也没有搜到代码是存在哪里的~ 唉, 最后在小程序开发者工具的文件, 切换项目的位置找到了这个~~~ 好吧, 最终还是找到了.

第二个坑: 关于书写问题, 这个小程序开发者工具没有自动提示代码书写问题等等,(也可能是我自己没有设置代码检查) 有时候会多打出来一个 >, 要注意删掉. 不然也不会报错, 但是效果始终运行不出来. 所以遇到问题要仔细检查自己的代码.
第三个坑: 提交按钮. 用 form 标签包起来的时候. 在按钮上写样式的话按钮会消失的!! 一定要再用个 view 把 form 和 button 都包起来. 然后在 view 上面去写样式. 嗯, 我也不知道是为什么, 反正是我自己试出来的.