• 微信小程序入门

    目录

    一.微信小程序简介

    二. 什么是小程序？

    三.小程序商城项目案例

    四.小程序之入门案例 

    json配置 

     wxml模板

    wxss样式

    js逻辑交互 

    测试结果

    一.微信小程序简介

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

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

    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点，万众瞩目的微信第一批小程序正式低调上线。

    三.小程序商城项目案例

    申请账号       如不知道怎么找到请点击下方链接小程序 (qq.com)icon-default.png?t=N7T8https://mp.weixin.qq.com/wxopen/waregister?action=step1

     

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

     

    安装专门开发小程序工具    本人下载的是稳定版本微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com)icon-default.png?t=N7T8https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

     

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

     

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

     

    四.小程序之入门案例 

    json配置 

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

     

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

     

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

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

    json两个页面 

     

    使上框变色 

    每个页面颜色不一 

     

     wxml模板
    2. "container">
    3.   "userinfo">
    4.     用户信息：{{userName}}
    5.     
    6.
    wxss样式
    1. /* pages/user/user.wxss */
    2. .userinfo {
    3.   display: flex;
    4.   flex-direction: column;
    5.   align-items: center;
    6.   color: #00f000;
    7. }
    js逻辑交互 

     

    1. // pages/user/user.js
    2. Page({
    3.  
    4.   /**
    5.    * 页面的初始数据
    6.    */
    7.   data: {
    8.    userName:'小流氓'
    9.   },
    10.   xxx(){
    11.    console.log('被带你');
    12.   },
    13.   /**
    14.    * 生命周期函数--监听页面加载
    15.    */
    16.   onLoad(options) {
    17.  
    18.   },
    19.  
    20.   /**
    21.    * 生命周期函数--监听页面初次渲染完成
    22.    */
    23.   onReady() {
    24.  
    25.   },
    26.  
    27.   /**
    28.    * 生命周期函数--监听页面显示
    29.    */
    30.   onShow() {
    31.  
    32.   },
    33.  
    34.   /**
    35.    * 生命周期函数--监听页面隐藏
    36.    */
    37.   onHide() {
    38.  
    39.   },
    40.  
    41.   /**
    42.    * 生命周期函数--监听页面卸载
    43.    */
    44.   onUnload() {
    45.  
    46.   },
    47.  
    48.   /**
    49.    * 页面相关事件处理函数--监听用户下拉动作
    50.    */
    51.   onPullDownRefresh() {
    52.  
    53.   },
    54.  
    55.   /**
    56.    * 页面上拉触底事件的处理函数
    57.    */
    58.   onReachBottom() {
    59.  
    60.   },
    61.  
    62.   /**
    63.    * 用户点击右上角分享
    64.    */
    65.   onShareAppMessage() {
    66.  
    67.   }
    68. })
    测试结果

  • 相关阅读:
    c++操作mysql（详解）
    JVM篇---第十一篇
    企业微信hook接口协议,ipad协议http,外部联系人图片视频文件下载
    WebSocket在node端和客户端的使用
    Windows内核--系统调用参数验证(5.1)
    多元线性回归_梯度下降法实现【Python机器学习系列（六）】
    【多线程初阶】多线程案例之线程池
    UBUNTU新版本，一键安装NETCDF，安装netcdf-c netcdf-v
    Single-cell 10x Cell Ranger analysis
    mobaxterm使用
  • 原文地址：https://blog.csdn.net/2201_75455485/article/details/133826027