开发微信小程序名片源码
编辑:小飞燕 发布时间:2021-04-14 14:40:42
小程序名片的功能之前已经详细介绍过,但是制作小程序名片不是一件简单的事情,涉及到的小程序代码非常复杂。以下是微信小程序名片源代码。
经过各种准备和配置,来到首页进行开发。首先,你需要实现如下的首页渲染:
模板名片非常多,需要使用模板、
这里需要微信提供的基本组件大致是输入(搜索框),动作单(右边是底部的下拉菜单,需要下拉菜单),滚动视图(abc跳转到右边),(当前实现中仍有一些问题,正在克服中)。
视图是一个块元素,是整个搜索框的样式。
*名片文件夹:由于本项目侧重于名片功能,所以在很多地方都会用到,所以需要通过模板将名片分开。
*模板:定义一个模板。模板的名称实际上是一个作用域。
* block:循环控制,名片很多,必须循环,类似于很多操作数据的前端帧循环。
*支持自定义属性数据,用于判断线上名片和线下名片。
*视图中有一些数据介绍,支持三维运算符。
引入模板非常方便。is和name一样,数据是用namedata传递的数据填充的。
一切都是以数据为中心点绑定的。
根据您的数据结构获取数据的具体操作:
这里的数据结构与json数据结构相同,如果你想把它传到这里的页面,它就是
```
this.setdata({
name data : card _ list _ name . data . cards,time data : card _ list _ time . data . cards
});
```
因为页面遍历名称数据、时间数据
你可以看看打印出来的数据结构,根据你的结构进行分析和传递。
你也可以在这里看一些对数据的操作。(必须按照这里定义的json数据格式进行操作。)
名片的样式放在common.css里是因为需要用到很多页面。这个common.css是所有页面都用的,需要一些初始化设置。在app.wxss中引用后才能映射到全局应用.
搜索框:其中bindchange是输入框改变的事件。微信提供的bindchange支持还有一个小问题。目前,这个事件只能通过失去焦点来触发。还是等后续改进,先实现功能吧。
在index.js中写入事件
```
bindinputchange : function(e){
//搜索发生了
var self=this//这个绑定,这个这个指向微信提供的窗口
var text=e . detail . value . touppercase;//获取输入内容
如果(text==''){ //如果输入为空,需要显示一些东西,否则不显示
show _ letter=' block
}else{
show _ letter=' none
}
this.setdata({
show_letter:show_letter,showsheet:true
});
var res=namedata获取传递的数据
if(data_type=='name'){
}else if(data_type=='time'){
res=timedata
};
for(var k in res){ //for-in循环到数据中的卡
var数据=res[k]。卡片;
for(var i=0;我
if(数据[i]。用户名!=null data[i]. username . index of(text)!=-1){
data[i][' display ']=' block ';//存在意味着赋值显示
}else{
data[i][' display ']=' none ';//没有赋值,也不显示
}
}
}
}
```
菜单栏:要成为菜单栏,使用微信提供的下拉菜单组件动作单,触发条件在此。
一切都从绑定事件开始:
```
bindbuttontapsheet : function(e){
//调用底部下拉菜单栏
}
```
还是要打好基础才能调动
js配置:
数据初始化数据:
你不能在这里拿。如果直接设置false,则不能调用3360事件。
当你把它调出来的时候,你必须把它去掉:以下是一样的
取消直接活动。(分为菜单栏外侧和底部)
//嗯,就这么简单。实现效果简单,小程序体验效果确实不错。
你还需要一个加载效果(暂时没有动画,我们以后再考虑。)
加载布局
主页的比较外层视图
根据微信的生命周期,```
onload:function(e){
this.setdata({
toastdisplay: " block ",htmlwrapdisplay:"none "
})
},
onshow:function(e){
this.setdata({
toastdisplay: " none ",htmlwrapdisplay:"block "
})
}
```
加载栏已完成。
扫,直接调用拍照功能。从这里可以看出,微信提供的照片小程序api使用起来非常快,只需要根据需求进行配置即可。
参照上面的流程和微信小程序名片的源代码,你一定要有足够的耐心和细心,才能成功开发出一个小程序名片。如果想获得更多相关信息,请关注源社网的小节目频道。
下面是题目的开头。如何申请微信小程序的appid?微信小程序的appid申请方法在标题末尾
如何申请微信小程序的appid?申请微信小程序appid的方法,想开发微信小程序必须申请微信小程序appid,那么如何申请微信小程序appid呢?微信小程序appid的申请方法。供你参考。
链接在微信公众平台注册小程序,然后选择要注册的小程序,如下图所示:
2.先写注册信息,安装提示的账号信息,激活邮箱,分步注册信息,激活邮箱。至于邮件是否被激活,我觉得这里不需要多说(本教程我注册了一个新的邮件账号)
3.前两部分其实挺简单的,按照提示就行了,重点是信息注册的内容怎么写。如下图所示,我列出了一些注意事项。
注意事项:
1).重点是完善组织机构代码和组织机构代码证的信息。组织机构代码是9或18位数字,你的身份证号码是可以的。刚去搜索找了个图上传。为了开发微信小程序,我也拼了,试了很久才找到。
2).管理员信息登录,可以选择企业或个人。如果是企业,需要填写营业执照。如果您是个人,只需填写正确的管理员身份信息。
3).认证方式有两种,一种是为腾讯指定账户选择小额资金,另一种是对微信进行认证。
我选择了微信认证,你可以根据自己的需要选择认证方式。
自己确认微信给的信息。如果没有问题,可以确认按钮,如果后悔也可以取消按钮取消。花了这么大力气。相信大家也想得到微信小程序开发者的appid,一定会确认继续后续操作。
看到这个页面说明你已经完成了大部分的操作步骤。确认按钮,说明您将使用什么来注册微信小程序
此页面仅表明主题信息一旦提交就不能修改。
ok按钮,开发小程序只剩下比较后一步了。
终于完成了微信小程序开发者的注册
下图开发设置的链接地址,找到你申请的小程序开发者的appid
进入开发设置页面,会看到appid (applet id)
就这样,我们终于得到了小程序开发的appid,然后你就可以开始你的小程序之旅了
新手怎么做
为什么后台的小程序爆款实验室消失了?
几个月前就消失了,相关营销取而代之
小程序有什么用怎么用?
有时候我想让一些线下的客户上线,但是阿里巴巴不是在客户手机上的。这时候小程序旺铺的作用就出来了
支付宝小程序是不是流失很多?
这个还挺多的。
小程序现在很流行 这样做有用吗?
小节目也会有一定的效果,但也需要有代价的推广。如果站内推广正在进行,你想扩大推广范围,可以尝试去做。如果不做站内推广,没必要做小节目。车站是排水的主战场。希望我的回答能让你满意!
猜你喜欢
-
4个微信小程序聊天技巧1155人喜欢
估计有不少人都使用过微信的聊天功能,其实这项功能是通过开发微信小程序达到的,微信小程序聊天功能要怎么开发?一起来看看具体步骤吧。1、整体框架很简单,两个页面。两个tab,并修改window标题栏和tabbar的颜色等属性就好。这个全部在app.json中完成。2、image组…
更新时间:2020-08-17 16:19:34
-
微信小程序跳转到淘宝技巧1112人喜欢
微信小程序可以跳转到淘宝吗?微信小程序如何跳转到淘宝?微信小程序对于有些用户而言其实是个非常好的平台,微信小程序其实可以跳转到淘宝,小程序把微信做成了淘宝,那么微信小程序可以跳转到淘宝吗?微信小程序如何跳转到淘宝呢?淘宝从用户角度而言是个购物工具,从…
更新时间:2020-10-05 09:23:04
-
2个微信小程序接口技巧1075人喜欢
微信小程序开发有哪些接口?据微信官方介绍,微信小程序包括线下扫码、对话分享、消息通知、小程序切换、历史列表、公众号关联和搜索查找等7大功能。当下最受大众喜爱的微信小程序小程序有哪些接口?小编将举例来说明一下微信小程序开发有哪些接口?本文档将带你…
更新时间:2020-08-31 20:09:05
-
6个修改小程序技巧1049人喜欢
小程序授权怎么修改?修改小程序授权代码是什么各位网友们,如果您的微信小程序同意了授权了,但是想要修改小程序授权,对于这种情况,不妨参考一下小编的小程序授权怎么修改的方法吧。小程序授权怎么修改?大家都发现了,涉及到授权获取用户基本信息,同意了小程序授权后…
更新时间:2020-08-24 10:47:00
-
9个小程序红包技巧1039人喜欢
微信发红包很普遍也很简单,但是微信小程序兴起之后,很多商户开始用微信小程序发红包了,这样也有利于大家对小程序本身的关注,接下来就一起来学习下操作方式吧!登录微信支付商户平台在调用接口前有一些工作需要商户登录微信小程序支付商户平台进行操作,请使用微信…
更新时间:2019-11-09 16:29:18
-
12个小程序图片技巧1036人喜欢
微信小程序无法显示图片,图片显示不全怎么办?对于一张网络图片高度太高,而显示不全如何解决?下面小编就来为大家讲解一下。其实我一贯的观点是,所有的问题从api中都能够找到答案,只是有时候缺少耐心,而没有好好去读官方api,出现问题后着急的google、百度、github.…
更新时间:2019-11-10 13:52:04
-
6个小程序投票技巧1034人喜欢
大家想必都使用过微信小程序,微信小程序也丰富了我们的微信生活。下面小编就来为大家讲解一下微信小程序投票系统开发以及微信小程序应用开发。微信小程序七大解读:1、线下扫码:用户可以在微信小程序中使用扫一扫。2、对话分享:用户可以分享微信小程序或其中的任…
更新时间:2020-01-24 16:02:28
-
2个小程序优化技巧1020人喜欢
在小编鼓起勇气开发了两个小程序之后,发现其实可以对开发过程进行一些优化,这样最终开发出来的小程序体验会好很多。以下是微信小程序优化方案,也是一些优化心得,希望能够帮助到大家。1、理解wx:if和hidden,并合理利用,官方文档中并没有明确说出hidden如何使用,要不…
更新时间:2020-08-22 16:44:11
-
3个小程序空格代码技巧1007人喜欢
每一种小程序代码对于小程序的功能的实现都是有不同作用的,那么微信小程序空格代码有什么作用呢?一起来看看以下资料,你就明白了。先上一张处理前的代码图:第一步:在右边的代码界面中右键单击(左边要在“编辑”tab),在出现的菜单中选择“格式化代码”。格式化的效…
更新时间:2020-08-24 10:51:58
-
7个小程序输出技巧1006人喜欢
小程序的输出有很多种形式,之前介绍了小程序输出日志的相关资料,接下来小编要讲解的是微信小程序控制台输出的开发实例,一起来看看吧。在此之前,我们必须先在微信小程序的平台上,设置下域名:注意:微信小程序,不支持普通的http协议,必须通过https协议。于是,我在本地搭…
更新时间:2019-11-08 14:37:35
-
8个微信小程序扫码技巧1006人喜欢
微信小程序扫码接口怎么开通?如果开通了微信小程序扫码接口以后,那么用微信扫普通微信二维码就打开微信小程序了哦。这对于推广微信小程序来说有很大的帮助,以下是具体的方法了。微信小程序扫码接口怎么开通?为了方便小程序开发者更便捷地推广小程序,兼容线下已…
更新时间:2019-11-10 13:53:40
-
10个商家小程序技巧1003人喜欢
微信开放了附近的小程序之后引起了很多小程序使用者的关注,但是这个功能似乎对于商家来说意义更为重大,一起来看看商家怎么入驻微信附近小程序吧。核心提示:首先我们先了解一下那些商户可以使用“附近的小程序”目前可以加入的商家有帐号类型为企业、媒体、政府…
更新时间:2019-11-04 15:51:11