• 小程序学习之路(持续更新)


    1. 小程序简介

    小程序与普通网页开发的区别

    • 运行环境不同:网页运行在浏览器环境中、小程序运行在微信环境中
    • API不同:小程序无法调用DOM和BOM的API,但是可以调用微信环境提供的各种API 地理定位、扫码、支付。
    • 开发模式不同:网页开发模式:浏览器+代码编辑器 ;小程序有自己标准的开发模式:①申请小程序开发账号② 安装小程序开发者工具③创建和配置小程序项目

    2. 第一个小程序

    使用浏览器打开 https://mp.weixin.qq.com/网址,点击右上角的立即注册即可进入到小程序开发账号

    一. 注册流程如下
    1.注册:选小程序
    2.填写账号信息:
    3.提示邮箱激活:
    4.点击链接激活账号:
    5.选择主体类型:中国大陆、个人
    6.主体信息登记:个人、
    7.获取小程序的AppID:点左侧的开发、开发设置、创建小程序项目时,需要用到APPID

    二. 安装开发者工具

    1. 推荐下载和安装最新的稳定版,下载链接:https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
      2.打开开发工具扫码登陆
      3.点左侧小程序:设置下的代理——》代理设置选不使用任何代理,勾选后直连网络

    三. 创建小程序项目
    1.点击加号按钮
    2.填写项目信息 : 开发模式——》小程序、后端服务——》不使用云服务、语言javascript
    3.在模拟器上查看项目效果(点头部的编译)
    4.在真机上预览项目效果(点头部的预览)扫码查验
    5.以头像为界限主界面的5个组成部分:头像上部是菜单栏、头像那栏是工具栏、头像下是模拟器、模拟器右边是代码编辑区、编辑区下边是调试区

    四. 项目组成结构
    1.pages: 用来存放所有小程序的页面
    2.utils 用来存放工具性质的模块(格式化时间的自定义模块)
    3.app.js 小程序项目的入口文件(页面的脚步文件,存放页面数据,事件处理函数)
    4.app.json 小程序项目的全局配置文件(当前页面的配置文件,配置窗口外观、表现)

    • pages: 用来记录当前小程序所有页面的路径
    • window: 全局定义小程序所有页面的背景色文字颜色
    • style: 全局定义小程序组件所使用的样式版本
    • sitemapLocation: 用来指明 sitemap.json的位置

    5.app.wxss 小程序项目的全局样式文件(当前页面的样式表文件)
    6.project.config.json 项目的配置文件
    7.sitemap.json 用来配置小程序及其页面是否允许被微信索引
    8.wxml文件(页面的模板结构文件)

    • 页面的.json配置文件,可对本页面的窗口外观进行配置,页面中的配置项会覆盖app.json的window中相同的配置项

    9.新建小程序页面只需要在app.json——》pages中新增页面的存放路径即可

    3.小程序代码的构成

    一 . 小程序代码的构成——WXSS样式
    1.WXML和HTML的区别

    • 标签名称不同

    HTML (div、span、img、a)
    WXML (view 、text、image、navigator)

    • 属性节点不同

    《a href = ‘#’>超链接》《/a》
    《navigator url=‘/pages/home/home’》《/navigator》

    2.WXSS和CSS的区别

    • 新增了rpx尺寸单位

    CSS中需要手动像素单位换算,例如rem
    WXSS在底层支持新的尺寸单位rpx,在不同大小的屏幕上小程序会自动换算

    • 小程序提供了全局的样式和局部样式

    项目根目录中的app.wxss会作用于所有小程序页面
    局部页面的.wxss样式仅对当前页面生效

    • WXSS仅支持部分CSS选择器

    .class和#id
    element
    并集选择器、后代选择器
    ::after和::before登伪类选择器

    二.小程序代码的构成——JS逻辑交互

    1. 小程序中的js文件分为三大类,分别是

    ① app.js:是整个小程序项目的入口文件,通过调用App()函数来启动整个小程序

    ② 页面的.js:是页面的入口文件,通过调用Page()函数来创建并运行页面
    ③ 普通的.js文件:是普通的功能模块文件,用来封装公共的函数或属性供页面使用

    4.小程序的宿主环境

    4.1 小程序的启动过程

    ① 把小程序的代码包下载到本地
    ② 解析app.json 全局配置文件
    ③ 执行app.js小程序入口文件,调用App()创建小程序实例
    ④ 渲染小程序首页
    ⑤ 小程序启动完成

    4.2 页面渲染过程

    ① 加载解析页面的.json配置文件
    ② 加载页面的.wxml模板和.wxss样式
    ③ 执行页面.js文件,调用Page()创建页面实例
    ④ 页面渲染完成

    5. WXML模板语法

    在data中定义页面数据
    在页面对应的.js文件中,把数据定义到data对象中即可:

    Page({
     data: {
      //字符串类型的数据
      info:	'init data',
      // 数组类型的数据
      msgList:[{msg: 'hello'},{msg:'world'}]	
     }
    })
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
  • 相关阅读:
    家政系统搭建,家政预约上门小程序开发制作
    认识操作系统 | 理解管理 | 系统调用(System Call)
    Spark中的闭包引用和广播变量
    SSM - Springboot - MyBatis-Plus 全栈体系(二十五)
    Spring Cache+Redis缓存数据
    分布式与微服务概念
    [Servlet 4]Bean与DAO设计模式
    【PHPWord】PHPWord 根据word模板生成的内容动态生成目录以及页码更新(完整示例源码)
    【持续更新】Spark Submit命令 配置参数详解
    【freeRTOS】操作系统之六-低功耗模式
  • 原文地址:https://blog.csdn.net/qq_44613011/article/details/124869557