摘要：背景这一个月都在用开发一个价签项目现在项目功能完成了一半后接到新的要求用支付宝小程序开发一个页面出来页面上就两个扫描功能一个按钮提交功能于是乎我就开始了学习支付宝小程序开发体验支付宝小程序开发第一天首先我下载了小程序开发者工具然后创建了一个
背景:这一个月都在用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上面去写样式.嗯,我也不知道是为什么,反正是我自己试出来的.
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/110318.html
摘要：所以在小程序出现之后，一股框架之风也很快的出现，微信小程序刚推出之后，就出现了两个比较出名的小程序开发框架，。 原文地址：https://ant-move.github.io/we... 这里说的去除小程序框架其实并不严谨，因为小程序本身也算是一个框架，而且是一个功能更加完善的框架系统。在前端的概念中，我们一般说一个框架是指一个用来帮助开发者构建用户界面的框架，而小程序框架本身不仅仅包...
摘要：即日起至月日公测活动期间，成功参与新版公测活动并接入支付宝小程序的用户，可获得个人版套餐个月价值元的免费使用资格。计划的第一站我们选择了支付宝小程序。支付宝以及其他平台的小程序，在这个时代里，更加需要无服务器的开发方式。 作为国内首家专注于小程序领域的后端云服务，知晓云正式开启 3.0 计划——全平台 Serverless 服务。 「知晓云」cloud.minapp.com，诞生于 2...
摘要：目前支持哪些平台的搬家目前对外开放版本释放了微信小程序转支付宝小程序的功能，这也是我们在调研中发现需求最多的。从笔者的了解来看，微信小程序框架原理更接近于，而支付宝小程序更接近于。 原文地址： https://ant-move.github.io/we... 蚂蚁搬家工具（Antmove）是一个小程序开发辅助工具，致力于解决小程序跨平台开发的难题，借助于 Antmove，你只需要编写...
摘要：月日，在阿里云峰会北京站上，阿里巴巴旗下的阿里云支付宝淘宝钉钉高德等联合发布阿里巴巴小程序繁星计划提供亿元补贴，扶持万小程序开发者万商家。会上，阿里云正式发布了小程序云。看到繁星计划已上热搜。通过小程序云服务可以极大的降低交付部署成本。3月21日，在2019阿里云峰会·北京站上，阿里巴巴旗下的阿里云、支付宝、淘宝、钉钉、高德等联合发布阿里巴巴小程序繁星计划：提供20亿元补贴，扶持200万+小...
摘要：继微信正式推出微信小程序后，各个大厂陆续发布了各自的小程序平台支付宝小程序百度小程序头条小程序，跨小程序平台开发也成为了众多小程序开发者要面临的问题。 继微信正式推出微信小程序后，各个大厂陆续发布了各自的小程序平台 —— 支付宝小程序、百度小程序、头条小程序，跨小程序平台开发也成为了众多小程序开发者要面临的问题。 Antmove - 小程序跨平台解决方案 小程序开发血泪史 小程序发展初...
阅读 2262·2021-11-15 11:37
阅读 2921·2021-09-01 10:41
阅读 746·2019-12-27 11:58
阅读 731·2019-08-30 15:54
阅读 701·2019-08-30 13:52
阅读 2908·2019-08-29 12:22
阅读 1051·2019-08-28 18:27
阅读 1432·2019-08-26 18:42
