从0开始开发一款微信小程序

论科技 2023-11-22 17:03:52

0基础做一个微信小程序,实现名片展示和拨打电话功能。

0、什么是小程序

运行在微信之上的轻量级APP,它就像微信多了一个程序入口,操作体验与微信原生APP几乎会差别,你可以基于微信APP上开发自己的服务。

1、注册小程序账号

https://mp.weixin.qq.com/cgi-bin/wx

支持个人、企业、媒体等主体注册,不同的主体微信小程序提供的能力不一样,根据实际情况选择,我以个人注册为例。

2、安装微信小程序开发工具

登录小程序开发者后台,找到开发工具下载:微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com),针对不同开发者有不同类似的版本,一般选择稳定版就可以了,功能稳定,目前稳定版是1.06.2310080。下载根据提示进行安装。

运行后如果有防火墙拦截,点击允许访问网络

3、创建一个小程序

打开微信开发工具后用微信扫码登录

登录成功后主界面如下图所示

小程序开发工具提供了不同类型的小程序模板,这里选择小程序类型,点“+”号创建一个新的小程序项目。

项目名称:给项目起的名字,你给小程序的名命

目录:本地保存该小程序项目的文件目录

AppID:在微信小程序后台注册的小程序名字产生的ID,没有的可以使用测试号进行测试,也可以先注册一个ID

开发模式:选择小程序

后端服务:有云开发与不使用云服务模式,云开发是使用微信提供的服务器,你需要付费购买,0基础使用云服务器有点复杂,而且是收费模式,新手不建议选择,这里选择不使用云服务器

模板选择:随便选一个即可

1区域是显示微信上打开的效果,2区域是该项目的文件结构,3区域是代码编辑区,4区域是调试信息显示区,5区域是开发工具栏。

工具栏的预览按钮可以直接在你的微信上打开预览。

在资源管理器中找到page/index/index.wxml这个就是小程序打开时展示的页面,把里面的内容全部删掉。新建一个图片img目录,把名片放在img目录中。

名片可以在网上随便生成一个。

在page/index/index.wxml输入以下代码:

<image src="../../img/card.png" mode="widthFix"></image>

<image></image>是一对图片标签,是成对出现的,用<>括起来,<image>是开始标签,</image>是结束标签,注意结束标签有反斜杠/

标签里面可以加上一些属性,修饰这个图片显示的样式外观,src属性是显示图片的具体位置在哪,../表示当前文件的,../../表示的是再上一层的目录。mode是显示图片的模式,加上widthFix属性,否则图片显示可能会变形。一张小程序的名片就做好了,非常简单!

要实现打电话功能,需要写一个调用微信打电话的功能,微信是通过wx.makePhoneCall函数调用的,打开page/index/index.js文件,删除里面的内容,写入下面的调用代码:

Page({    phoneOn(){        wx.makePhoneCall({          phoneNumber: '18888888888',        })    }})

照着写就可以了,phoneOn是函数名,如何实现在图片上点击就调用该函数进而拨打这个电话号码呢?

在page/index/index.wxml图片标签中绑定点击调用属性就可以了

<image src="../../img/card.png" mode="widthFix" bindtap="phoneOn"></image>

绑定事件使用bindtap属性就可以实现。

点击图片后就会调用手机拨打电话功能

最后一步就是把开发好的中程序上传到微信后台审核。

4、小程序提交审核上线

登录小程序后台,在版本管理器中找到刚提交的开发版本,提交审核

提交审核的小程序会有一个代码安全审核流程

名片没有收集任何用户隐私,选择未采集用户隐私可以加快审核进度。

一般审核1-7天完成。

审核通过你就可以分享给你的朋友了

0 阅读:53

论科技

简介:💬论科技🚀็็็็็็็็็็็็🚶走进科技世界🌏探索科技奥秘