微信小程序学习起步

一.起步

微信小程序官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/
1.申请账号
2.安装开发者工具
3.新建项目

二.小程序代码构成

1.一个项目中生成了4种文件
.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件
在这里插入图片描述

2.JSON配置
JSON 是一种数据格式,在小程序中扮演静态配置的角色。
在项目的根目录有一个 app.jsonproject.config.json,在 pages/logs 目录下还有一个 logs.json

app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。配置内容:

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

(1)pages字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
(2)window字段 —— 定义小程序所有页面的顶部背景颜色,文字颜色定义等。

②工具配置 project.config.json
每个项目的根目录都会生成一个 project.config.json,你在工具上做的任何配置都会写入到这个文件,例如界面颜色、编译配置。就算重新安装工具或者换电脑时,个性化配置也不会丢失。
③页面配置 page.json
用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。
如果整个项目的风格是蓝色调,那么你可以在 app.json 里边声明顶部颜色是蓝色。如果每个页面都有不一样的色调来区分不同功能模块,因此提供了 page.json,让开发者可以独立定义每个页面的一些属性。

3.JSON语法
JSON文件都是被包裹在一个大括号中 {},通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中,一定要给 Key 值加双引号,写成单引号是错误的。
JSON的值只能是以下几种数据格式,其他任何格式都会触发报错,例如 JavaScript 中的 undefined。

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

:JSON 文件中无法使用注释,添加注释将会报错。

4.WXML 模板
WXML 由标签、属性等等构成,和 HTML 非常相似,但是也有很多不一样的地方:
①标签名字有点不一样
HTML经常会用到的标签是 div, p, span
WXML 用的标签是 view, button, text 等等

②多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
通过 {{ }} 的语法把一个变量绑定到界面上,称为数据绑定。还需要 if/else, for等控制能力描述状态和界面的关系,这些控制能力都用 wx: 开头的属性来表达。
WXML:

<text>{{msg}}</text>

JS:

this.setData({ msg: "Hello World" })

5.WXSS 样式
WXSS 具有 CSS 大部分的特性,也有一些扩充和修改。
①新增了尺寸单位rpx,可以免去换算的烦恼,只要交给小程序底层来换算即可
②提供了全局的样式和局部样式。可以写一个 app.wxss 作为全局样式,作用于当前小程序的所有页面,局部页面样式 page.wxss 仅对当前页面生效。
③WXSS 仅支持部分 CSS 选择器

6.JS 逻辑交互
通过编写 JS 脚本文件来处理用户的操作:

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

点击 button 按钮的时候,把界面上 msg 显示成 “Hello World”,在 button 上声明一个属性: bindtap ,在 JS 文件里边声明了 clickMe 方法来响应点击操作:

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})

三.小程序宿主环境

1.微信客户端给小程序所提供的环境为宿主环境

2.渲染层和逻辑层
小程序的运行环境分成渲染层逻辑层,其中 WXML 模板和 WXSS 样式工作在渲染层JS 脚本工作在逻辑层

3.程序与页面
整个小程序只有一个 App 实例,是全部页面共享的。小程序启动后,在 app.js 定义的 App 实例的 onLaunch 回调会被执行:

App({
  onLaunch: function () {
    // 小程序启动之后 触发
  }
})

pages/logs/logs 下包括了4种文件,微信客户端会先根据 logs.json 配置生成一个界面,顶部的颜色和文字都可以在这里边定义好。然后客户端就会装载这个页面的 WXML 结构和 WXSS 样式。最后客户端会装载 logs.js, logs.js 的大体内容就是:

Page({
  data: { // 参与页面渲染的数据
    logs: []
  },
  onLoad: function () {
    // 页面渲染后 执行
  }
})

Page 是一个页面构造器,这个构造器就生成了一个页面。在生成页面的时候,小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构。
在渲染完界面之后,页面实例就会收到一个 onLoad 的回调,你可以在这个回调处理你的逻辑。
4.组件
①如果需要在界面上显示地图:

<map></map>

②如果希望地图一开始的中心的经纬度是济南,需要声明地图的 longitude(中心经度) 和 latitude(中心纬度)两个属性:

<map longitude="济南经度" latitude="济南纬度"></map>

③如果用户点击了地图上的某个标记,可以在 js 编写 markertap 函数来处理:

<map bindmarkertap="markertap" longitude="广州经度" latitude="广州纬度"></map>

5.API
①要获取用户的地理位置时,只需要:

wx.getLocation({
  type: 'wgs84',
  success: (res) => {
    var latitude = res.latitude // 纬度
    var longitude = res.longitude // 经度
  }
})

②调用微信扫一扫能力,只需要:

wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值