微信小程序(1)

原创 2018年04月15日 12:09:55

微信小程序(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中不能写注释,不然容易出错。
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Joker_YY/article/details/79947404

开发具有Windows任务栏布告区图标的应用程序

   许多应用程序,如输入法管理器、杀毒软件等均在任务栏布告区中放置一个有自已特色的图标,该图标让用户知道有一个后台程序正在运行,同时也提供了一种修改系统设置的快捷方法,本文将以C++ Builder...
  • yemagxy
  • yemagxy
  • 2001-05-04 22:20:00
  • 731

微信小程序的flex布局

微信小程序flex 布局
  • jackwelton
  • jackwelton
  • 2017-01-13 11:50:22
  • 854

原创:新手布局福音!微信小程序使用flex的一些基础样式属性

来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能...
  • AAASai_
  • AAASai_
  • 2016-12-06 15:48:03
  • 6332

微信小程序css篇----flex模型

一、Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ di...
  • qq_32067045
  • qq_32067045
  • 2017-01-15 15:37:06
  • 4851

【江南】微信小程序从0到1-整体框架

小程序整体框架       从9月22号小程序刚开始上线,就开始关注小程序。从刚开始登陆一脸懵逼到现在懂一些,相信很多刚开始学习的朋友都会有这么一段经历,没事,万事开头难。        登陆小...
  • nan355655600
  • nan355655600
  • 2016-12-19 22:50:51
  • 778

[微信小程序]滚动选择器

以前小程序不支持省市区选择器的,现在支持了    欢迎加入微信小程序开发交流群(173683895) 普通选择器 当前选择:{{array[index]}} ...
  • qq_35713752
  • qq_35713752
  • 2017-10-20 16:50:58
  • 458

微信:小程序学习笔记(3)

这几天断断续续查看小程序的开发。在熟悉的过程,发现微信提供的这个开发工具还没完善,提示代码几乎无法玩。这套东西也是基于vscode。为何不在单独的vscode完善一下?对于维护这套ide而言,对web...
  • hero82748274
  • hero82748274
  • 2016-09-27 18:52:08
  • 2486

微信小程序开发--Item01 小程序开发工具熟悉

什么是微信小程序? 对我们开发者的影响?一些基本要求小程序大小要求: 基本安装包小于2M性能上: WebApp< Hybrid< Native 性能上关注问题:开放平台,生态,格局和眼光现在的App...
  • i10630226
  • i10630226
  • 2016-12-08 11:42:54
  • 802

论微信小程序的坑:thirdScriptError TypeError: this.setData is not a function

一枚一起学习,一起进步的小白
  • cyxevil
  • cyxevil
  • 2017-08-24 10:01:35
  • 10259

微信小程序的吐血日记(1)

微信小程序的吐血日记 工作需要,开始接触微信小程序,一脸懵逼的踏上挖坑之旅...
  • u013632854
  • u013632854
  • 2017-03-27 22:47:47
  • 655
收藏助手
不良信息举报
您举报文章:微信小程序(1)
举报原因:
原因补充:

(最多只允许输入30个字)