微信小程序入门

简介: 微信小程序入门

一.微信小程序简介

微信小程序是一种运行在微信客户端内的应用程序,它以小巧、轻量、便捷的特点受到广泛关注和使用。微信小程序可以在微信中直接使用,无需下载和安装额外的应用,用户可以通过扫描二维码、搜索或从相关页面打开小程序进行使用。

微信小程序的主要特点包括:

  1. 开发便捷:使用微信开发者工具进行开发,基于 JavaScript、CSS 和 WXML (微信自定义的组件模板语言) 进行界面构建,可以使用开发者熟悉的前端技术进行开发。
  2. 轻量快速:微信小程序的体积较小,加载速度快,用户可以快速打开和使用小程序,无需等待长时间的下载和安装过程。
  3. 与微信生态整合:微信小程序可以与微信的社交功能和生态系统进行深度整合,通过微信分享、微信支付、微信登录等接口,实现丰富的功能和交互体验。
  4. 离线访问:用户一旦打开过小程序,即使网络环境不佳或者没有网络连接,也能够继续访问小程序的部分功能和内容,提供更好的用户体验。
  5. 安全可靠:微信小程序通过权限机制和沙箱环境来保障用户的信息安全和隐私保护,开发者需要经过微信的审核才能发布小程序,确保小程序的质量和安全性。

微信小程序广泛应用于各个领域,包括电商购物、社交通讯、新闻资讯、出行导航、在线教育等。开发者可以通过微信小程序提供的开放接口和能力,为用户提供丰富多样的应用场景和功能,实现商业化应用或个人创作。同时,微信小程序也为开发者提供了多种变现方式,如广告投放、小程序支付等,提供了商业化的机会。

二. 什么是小程序?

  1. 2017年度百度百科十大热词之一
  2. 微信小程序(wei xin xiao cheng xu),简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用( 张小龙对其的定义是无需安装,用完即走,实际上是需要安装的,只不过小程序的体积特别小, 下载速度很快,用户感觉不到下载的过程 )
  3. 限制:同一个分包中的页面享有共同的预下载大小限额 2M,限额会在工具中打包时校验。
  4. 2017年1月9日0点,万众瞩目的微信第一批小程序正式低调上线。

三.小程序商城项目案例

申请账号       如不知道怎么找到请点击下方链接

https://mp.weixin.qq.com/wxopen/waregister?action=step1


使用微信建立好账号后 我们可以在菜单 “开发”-“开发设置” 看到小程序的 AppID 了 。

这里则使用 菜单 “开发”-“开发设置” 看到小程序的 AppID

弄好之后可以尝试真机调试

四.小程序之入门案例

json配置

出现微信头像之后基本的项目结果就欧克了

 

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

文件类型 必需 作用
js 页面逻辑
wxml 页面结构
json 页面配置
wxss 页面样式表

注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名。

json两个页面

使上框变色

每个页面颜色不一

wxml模板
<!--pages/user/user.wxml-->
<view class="container">
  <view class="userinfo">
    用户信息:{{userName}}
    <button bindtap="xxx">点它</button>
  </view>
</view>
wxss样式
/* pages/user/user.wxss */
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #00f000;
}
js逻辑交互

 

// pages/user/user.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
   userName:'小流氓'
  },
  xxx(){
   console.log('被带你');
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  }
})
测试结果


目录
相关文章
|
2月前
|
JSON 小程序 JavaScript
微信小程序入门实践
微信小程序入门实践
|
3月前
|
JSON 小程序 前端开发
微信小程序框架(五)-全面详解(学习总结---从入门到深化)
微信小程序框架(五)-全面详解(学习总结---从入门到深化)
52 0
|
2月前
|
小程序 JavaScript 前端开发
微信小程序云开发入门实践
微信小程序云开发入门实践
|
2月前
|
小程序 JavaScript 容器
微信小程序入门学习02-TDesign中的自定义组件
微信小程序入门学习02-TDesign中的自定义组件
|
2月前
|
JSON 小程序 前端开发
微信小程序开发入门学习01-TDesign模板解读
微信小程序开发入门学习01-TDesign模板解读
|
2月前
|
小程序 数据可视化 开发者
微信小程序开发入门介绍-布局组件
微信小程序开发入门介绍-布局组件
|
2月前
|
存储 小程序 开发工具
一篇文入门微信小程序开发环境搭建
一篇文入门微信小程序开发环境搭建
|
3月前
|
安全 小程序 算法
微信支付-全面详解(学习总结---从入门到深化)
微信支付-全面详解(学习总结---从入门到深化)
115 0
|
29天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
29天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。

热门文章

最新文章