微信小程序入门介绍

1.创建小程序项目

1.申请小程序开发账号
2.安装小程序开发者工具
3.创建和配置小程序项目

• 1.1 注册

  访问 https://mp.weixin.qq.com/ 网址，点击立即注册，选择小程序，填写注册信息，邮箱激活
  

• 1.2 获取小程序的AppID

  </>开发管理 -> 开发设置(AppID)

• 1.3 安装开发者工具

  1.快速创建小程序项目
  2.代码的查看与编辑
  3.对小程序功能调试
  4.小程序的预览和发布
  

• 1.4 扫码登录微信开发者工具

• 1.5 设置外观、代理

• 1.6 创建小程序

  • 新建项目

    项目名称
    目录
    AppID
    不使用云服务
    语言 Javascript
    

2.主界面5部分

菜单栏、工具栏、模拟器、代码编辑器、调试区

3.项目结构

pages: 存放小程序页面
utils: 存放工具性质的模块
app.js: 小程序项目入口文件
app.json: 小程序项目全局配置问价
app.wxss: 小程序项目的全局样式文件
project.config.json: 项目的配置文件
sitemap.json: 用来配置小程序及其页面是否被微信索引

4.页面组成部分

.js文件 脚本文件
.json文件 页面配置文件
.wxml文件 页面模板结构文件
.wxss文件 当前页面样式表文件

• json配置文件

  1.app.json
  2.project.config.json
  3.sitemap.json
  4.页面文件夹中的json配置文件
  

• app.json文件

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

• project.config.json配置文件

  对小程序开发工具的个性化配置

  setting 编译相关配置
  projectname 项目名称
  appid 小程序账号ID
  

• sitemap.json文件

  小程序的页面是否被微信索引

• 页面的 json配置文件

  配置当前页面的窗口外观，会覆盖app.json的window配置项

• 修改项目首页

  修改 app.json中pages中页面路径的前后路径

• wxml

  微信标签语言

  与html的区别
  1.标签名称不同
      HTML(div/span/img/a)
      WXML(view/text/image/navigator)
  2.属性节点不同
  3.提供类似Vue的模板语法
      数据绑定
      列表渲染
      条件渲染
  

• wxss

  小程序样式语言

  与css的区别
  1.新增rpx尺寸样式
      不需要向rem一样手动单位换算
  2.提供了全局样式和局部样式
      app.wxss 全局样式
      每个页面.wxss 局部样式
  3.wxss仅支持部分css选择器
      .class #id
      element
      并集选择器、后代选择
      ::after和::before等伪类选择器
  

• js文件的三大分类

  • app.js

    小程序入口文件
    

  • 页面js文件

    页面的入口文件
    

  • 普通的js文件

    封装公共函数或属性