微信小程序开发:学习笔记[1]——Hello World

微信小程序开发:学习笔记[1]——Hello World

快速开始

1.前往微信公众平台下载微信开发者工具。

地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

2.打开微信开发者工具,并新建项目

打开微信开发者工具,选择新建小程序项目,我们先不需理解AppID的概念,新建项目时选择无AppID,并取消勾选“建立普通快速启动模板”的选项。

  

3.在根目录添加代码

1.在根目录创建app.json文件

  

2.在代码中键入下列代码

  

3.建立如下目录结构

  

在根目录下新建pages目录,然后在pages目录下新建index目录,接着在index目录下创建两个文件index.wxml和index.js。

  • index.wxml的内容为:<text>Hello World</text>
  • index.js的内容为:Page({})

4.效果

  

微信小程序项目结构

小程序由配置代码JSON文件、模板代码 WXML 文件、样式代码 WXSS文件以及逻辑代码 JavaScript文件组成.

JSON文件

?JSON 是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色

比如我们在app中键入window,可快速生成下列代码:

  

这里对微信小程序进行了基本配置,比如标题、导航栏的样式、刷新情况等等。

说明:

  1.JSON的Key必须包裹在一个双引号中,在实践中,编写 JSON 的时候,忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。

  2.JSON的值只能是以下几种类型

  • 数字,包含浮点数和整数
  • 字符串,需要包裹在双引号中
  • Bool值,true 或者 false
  • 数组,需要包裹在方括号中 []
  • 对象,需要包裹在大括号中 {}
  • Null

  3.JSON中无法使用注释

WXWL模板

  WXML 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件、事件系统,可以构建出页面的结构

WXSS样式

  WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果

  WXSS与Web开发中的CSS类似。为了更适合小程序开发,WXSS对CSS做了一些补充以及修改。

JavaScript脚本

  小程序的主要开发语言是 JavaScript ,开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求。

原文地址:https://www.cnblogs.com/MrSaver/p/8988220.html

时间: 2024-10-06 05:57:58

微信小程序开发:学习笔记[1]——Hello World的相关文章

微信小程序,学习笔记(一)框架,视图层

微信小程序,学习笔记(一)框架,视图层 学习链接:http://www.w3cschool.cn/weixinapp/ 因为其实并非原创,但是并没有什么好的类别可选,所以修改成:"翻译"了. 熟悉 文档结构介绍 --- [D] pages --- [D] utils --- [F] app.js --- [F] app.json --- [F] app.wxss 全局变量.对象.方法 普通类型 对象 App 应用程序全局实例,在app.js中定义,每个程序只有一个实例,可以通过如下方式

微信小程序-20170421学习笔记

/**     * 微信小程序 笔记     */ 1.文件结构        微信小程序 官方给与的结构为:        projectName            pages                index                    index.js                    index.wxml            app.js            app.json 这里重点看一下,app.json        {          "pages

小程序开发--学习笔记

公众平台登录网页:https://mp.weixin.qq.com 小程序社区:http://developers.weixin.qq.com/ ------------------ 默认开发目录 ---------------- 1.  app.js.app.json.app.wxss 这三个文件必须有不能删掉. 一个小程序主体部分由这三个文件组成,而且必须放在项目的根目录 js后缀的是脚本文件,调用小程序框架提供的 API-- API 文档 json后缀的文件是对整个小程序的全局配置文件--

微信小程序开发个人笔记

1,配置文件.json 小程序的全局配置app.json和页面配置page.json每单页页面也有相应的.json文件,设置每个页面中.json配置,会覆盖与app.json相同的配置项.如下:是一个包含了所有配置选项的简单配置app.json "pages": [//设置页面的路径 "pages/index/index", //不需要写index.wxml,index.js,index,wxss,框架会自动寻找并整合 "pages/logs/logs&q

微信小程序-开发组件-笔记1

1.视图容器组件(view) view组件代表了一个页面的基本视图,也就是一个新的页面的最外层容器,相当于HTML中的DIV容器.对于每一个微信小程序的控件而言,有一些属性是通用的.表1是一些通用的属性. 表1  view属性和说明 属性名 类型 描述 注释 Id String 组件的唯一标识 保持整个页面唯一 class String 组件的样式类 在对应的wxss中定义的样式类 style String 组件的内联样式 可以动态设置的内联样式 hidden Boolean 组件是否显示 所有

微信小程序开发学习(一)

一.各种JSON配置 1.小程序配置app.json 为小程序全局配置,包括所有页面路径.界面表现.网络超时时间.底部tab等,类比APP开发中manifest配置. 2.工具配置project.config.json 一些个性化配置,暂时没遇到需要用到的地方. 3.页面配置page.json 独立定义每个页面一些属性,如顶部颜色.是否允许下拉刷新.不过色调感觉还是统一定义比较好,适合多个页面情况,一般来说小程序主要是结合tab实现多页面. 二.WXML 1.标签名 类比HTML,不过标签名是v

微信小程序开发学习(二)

一些官方API 总结了一些官方API,便于之后有用时针对性查找(发现官方给了好多好用的API)官方API文档 基础 wx.canIUse:判断小程序的API,回调,参数,组件等是否在当前版本可用,返回值为boolean. 使用${API}.${method}.${param}.${options}或者${component}.${attribute}.${option}方式来调用 参数说明 ${API}代表API名字 ${method}代表调用方式,有效值为return,success, obj

微信小程序开发:学习笔记[2]——WXML模板

微信小程序开发:学习笔记[2]--WXML模板 快速开始 介绍 WXML 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件.事件系统,可以构建出页面的结构. 打开开发工具的编辑器,在根目录下找到 app.json 文件,双击打开,在 "pages/index/index" 上新增一行 "pages/wxml/index" 保存文件.模拟器刷新后,读者可以在编辑器中找到 pages/wxml/index.wxm

微信小程序开发:学习笔记[3]——WXSS样式

微信小程序开发:学习笔记[3]--WXSS样式 快速开始 介绍 WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果. WXSS与Web开发中的CSS类似.为了更适合小程序开发,WXSS对CSS做了一些补充以及修改. 文件组成 项目公共样式:根目录中的app.wxss为项目公共样式,它会被注入到小程序的每个页面. 页面样式:与app.json注册过的页面同名且位置同级的WXSS文件.比如注册了pages/rpx/index页