一.什么是小程序?
微信小程序(wei xin xiao cheng xu),简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用( 张小龙对其的定义是无需安装,用完即走,实际上是需要安装的,只不过小程序的体积特别小, 下载速度很快,用户感觉不到下载的过程 )
2017年1月9日0点,万众瞩目的微信第一批小程序正式低调上线。
- 小程序是一种轻量级的应用程序,它可以在移动设备上运行,并提供类似于传统应用程序的功能和体验。小程序通常不需要下载和安装,可以直接在手机的操作系统环境中运行,如微信、支付宝等。
- 小程序可以满足用户的特定需求,比如在线购物、餐饮外卖、新闻阅读、社交娱乐等。它们通常具有简洁的界面和快速的加载速度,以提供便捷的使用体验。
- 与传统应用程序相比,小程序无需占用手机存储空间,升级和更新也更为方便。同时,小程序还可以实现跨平台运行,提供给开发者更广阔的用户群体。
- 小程序是一种灵活、便捷的应用形式,为用户带来更多的便利和选择。
二.小程序可以干什么?
- 同App进行互补,提供同app类似的功能,比app操作更加简洁的轻应用
- 通过扫一扫或者在微信搜索即可下载
- 用户使用频率不高,但又不得不用的功能软件,目前看来小程序是首选
- 连接线上线下
- 开发门槛低, 成本低
三.入门使用
相关资料 : 微信公众平台
开发小程序的第一步,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序。
跟随这个教程,开始你的小程序之旅吧!!!
3.1. 注册
进入
根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。
小程序注册
完成信息的填写后会根据你输入的邮箱账号,发送链接进行激活,点击进去后进行信息的登记 (需要实名认证) ,在选择中会有个类型,选择个人即可。。
3.4.项目结构
小程序包含一个描述整体程序的
app
和多个描述各自页面的page
。一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:
一个小程序页面由四个文件组成,分别是:
.json
后缀的JSON
配置文件.wxml
后缀的WXML
模板文件.wxss
后缀的WXSS
样式文件.js
后缀的JS
脚本逻辑文件
详细如图:
注 : 图中的user的一个页面&页面名称
3.5.应用
我们创建完成项目后,会有两页面,一个是主页,一个是日志。
在左边的模拟器中可以进行查看和操作。
如图 :
接下来我们继续入门的一个基础使用
在主体中的 app.json 文件中新创建一个页面为 : user
{ "pages":[ "pages/user/user", "pages/index/index", "pages/logs/logs" ],
结合我们所学的 Vue技术点 进行小程序页面的代码编写
在创建user的文件中找到 user.json ,进行页面相关的设置
{ "usingComponents": {}, "navigationBarBackgroundColor": "#aaa" }
在创建user的文件中找到 user.wxss ,进行页面相关的样式设置
/* pages/user/user.wxss */ .userinfo { display: flex; flex-direction: column; align-items: center; color: #aaa; } .btn{ margin: 20px; }
在创建user的文件中找到 user.js ,在Page 中进行页面Vue变量及方法的编写
data: { userName:'爱坤' }, clickMe(){ console.log('用户已经点击了'); },
在创建user的文件中找到 user.wxml ,进行页面的布局
<view class="container"> <view class="userinfo"> 用户名称 : {{userName}} <button class="btn" type="primary" plain="true" bindtap="clickMe" >点击我</button> </view> </view>
打开模拟器,编辑器,调试器进行编写的一个代码测试。
效果如图 :