微信小程序入门级

简介: 微信小程序入门级

一.什么是小程序?

微信小程序(wei xin xiao cheng xu),简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用( 张小龙对其的定义是无需安装,用完即走,实际上是需要安装的,只不过小程序的体积特别小, 下载速度很快,用户感觉不到下载的过程 )


2017年1月9日0点,万众瞩目的微信第一批小程序正式低调上线。


  • 小程序是一种轻量级的应用程序,它可以在移动设备上运行,并提供类似于传统应用程序的功能和体验。小程序通常不需要下载和安装,可以直接在手机的操作系统环境中运行,如微信、支付宝等。
  • 小程序可以满足用户的特定需求,比如在线购物、餐饮外卖、新闻阅读、社交娱乐等。它们通常具有简洁的界面和快速的加载速度,以提供便捷的使用体验。
  • 与传统应用程序相比,小程序无需占用手机存储空间,升级和更新也更为方便。同时,小程序还可以实现跨平台运行,提供给开发者更广阔的用户群体。
  • 小程序是一种灵活、便捷的应用形式,为用户带来更多的便利和选择。


二.小程序可以干什么?

  • 同App进行互补,提供同app类似的功能,比app操作更加简洁的轻应用
  • 通过扫一扫或者在微信搜索即可下载
  • 用户使用频率不高,但又不得不用的功能软件,目前看来小程序是首选
  • 连接线上线下
  • 开发门槛低, 成本低

三.入门使用

相关资料  : 微信公众平台

开发小程序的第一步,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序。

跟随这个教程,开始你的小程序之旅吧!!!

3.1. 注册

进入

根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。


小程序注册

完成信息的填写后会根据你输入的邮箱账号,发送链接进行激活,点击进去后进行信息的登记 (需要实名认证) ,在选择中会有个类型,选择个人即可。。

3.4.项目结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page

一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:



文件 必需 作用
app.js 小程序逻辑
app.json 小程序公共配置
app.wxss 小程序公共样式表

一个小程序页面由四个文件组成,分别是:

文件类型 必需 作用
js 页面逻辑
wxml 页面结构
json 页面配置
wxss 页面样式表
  • .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>

打开模拟器,编辑器,调试器进行编写的一个代码测试。

效果如图 :

       好啦今天就到这里了,希望能帮到你哦!!!

目录
相关文章
|
缓存 小程序 JavaScript
微信小程序开发之入门级02(带你进一步了解微信小程序开发)
微信小程序开发之入门级02(带你进一步了解微信小程序开发)
105 0
|
小程序 前端开发 JavaScript
微信小程序系列之入门级(带你领略微信小程序的魅力)
微信小程序系列之入门级(带你领略微信小程序的魅力)
77 0
|
存储 缓存 JSON
【微信小程序开发小白零基础入门】第一个入门级小程序【建议收藏】
文章目录一、第一个入门级小程序1.新建项目2.真机预览3.代码上传4.小程序版本二、小程序目录结构1.项目配置文件2.主体文件3.页面文件4.其他文件三、开发者工具功能介绍1.菜单栏2.工具栏3.模拟器4.编辑器5.调试器、推荐小程序(欢迎各位大佬指导)一、第一个入门级小程序1.新建项目步骤1双击微信web开发者工具图标,管理员或开发者使用微信扫码二维码后进入菜单画面。单击菜单中的“小程序项目”选项进入小程序项目管理页面。版权声明:本文为CSDN博主「智慧云工具箱」的原创文章,遵循CC 4.0 BY-SA版权协议其中小程序的AppID可以登录微信公众平台(https://mp.weixin.q
【微信小程序开发小白零基础入门】第一个入门级小程序【建议收藏】
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
479 7
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
529 1
|
1月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
111 7
ly~
|
2月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
78 6
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
189 1
|
1月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
62 5
|
1月前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
59 5