微信小程序(1)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Joker_YY/article/details/79947404

微信小程序(1) 了解微信小程序


1. 下载并安装微信小程序IDE

1.官网注册https://mp.weixin.qq.com/,并下载相应的IDE。
2.运行下载的安装包
这里写图片描述
3.根据一般安装方法安装微信小程序的IDE
这里写图片描述
一直按照默认配置安装即可。


2. 微信小程序项目框架了解

1.创建项目,没有AppID的话,只是部分功能受限,不会太影响我们如今的学习。如果需要上传小程序的话,需要个人去注册并申请相应的AppID。
这里写图片描述

2.建立“普通快速启动模板”,其项目目录如下:
这里写图片描述

  • app.js——整个项目的启动文件
    注释写的onlaunch方法有三大功能:

    • 浏览器缓存进行存和取数据
    • 用登陆成功的回调
    • 获取用户信息

    globalData是定义整个项目的全局变量或者常量。
    此外,若需要调用API的时候,一般我们会在该文件中的定义一些API变量,如API: "https://api.douban.com",之后在需要某个页面调用该API的时候,使用app.globaData.API就能够使用该变量。
    【为了整个项目的维护,还是建议把这种公用参数统一写在配置文件中】

  • app.json——整个项目的配置文件

    • 注册页面
    • 配置tab页
    • 设置整个项目的样式
    • 页面标题等等

    注意:小程序启动默认的第一个页面,就是app.json的pages中的第一个页面。

  • pages——小程序的页面组件
    有几个页面就会有几个子文件夹。
    在快速启动模板中,就有两个页面,index和logs
  • index目录——index页面
    有三个文件,与web开发的文件是一一对应的
    • index.wxml -> index.html
    • index.wxss -> index.css
    • index.js(js文件)
      js文件中的部分函数解释:
      • var app = getApp();
        引入整个项目的app.js文件,用来取期中的公共变量等信息
      • 整个page({})中,第一个data,就是本页面组件的内部数据,会渲染到该页面的wxml文件中(类似于vue、react),通过setData修改data数据,驱动页面渲染
      • 一些生命周期函数
      • onload() (监听页面加载)
      • onready() (页面初次渲染)
      • onshow() (页面显示)
      • onhide() (页面隐藏)
      • onShareAppMessage() (设置页面分享的信息)
      • …… (更多的可查官网API)
    • .json文件
      作为该页面组件的配置文件,设置页面标题等功能。
      json中不能写注释,不然容易出错。
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页