微信小程序学习报告

12人阅读 评论(0) 收藏 举报

微信小程序学习报告

1.申请账号

    点击 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根据指引填写信息和提交相应的资料

    

2.安装开发模板

    下载开发工具
             
        

小程序配置 app.json

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

   

3.WXML 模板

从事过网页编程的人知道,网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS 通常是用来处理这个页面和用户的交互。

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

4.WXSS 样式

WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改。

  1. 新增了尺寸单位。在写 CSS 样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比,采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ,开发者可以免去换算的烦恼,只要交给小程序底层来换算即可,由于换算采用的浮点数运算,所以运算结果会和预期结果有一点点偏差。
  2. 提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同,你可以写一个 app.wxss 作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss 仅对当前页面生效。
  3. 此外 WXSS 仅支持部分 CSS 选择器

5.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" })
  }
})

6.小程序的启动

微信客户端在打开小程序之前,会把整个小程序的代码包下载到本地。

紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径:

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

这个配置说明在 QuickStart 项目定义了两个页面,分别位于 pages/index/index 和 pages/logs/logs 目录。而写在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)。

于是微信客户端就把首页的代码装载进来,通过小程序底层的一些机制,就可以渲染出这个首页。

小程序启动之后,在 app.js 定义的 App 实例的 onLaunch 回调会被执行:

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

接下来我们简单看看小程序的一个页面是怎么写的。

7.程序与页面

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

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

Page 是一个页面构造器,这个构造器就生成了一个页面。在生成页面的时候,小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构,于是就得到了你看到的小程序的样子。

在渲染完界面之后,页面实例就会收到一个 onLoad 的回调,你可以在这个回调处理你的逻辑。。

8.组件

小程序提供了丰富的基础组件给开发者,开发者可以像搭积木一样,组合各种组件拼合成自己的小程序。

就像 HTML 的 div, p 等标签一样,在小程序里边,你只需要在 WXML 写上对应的组件标签名字就可以把该组件显示在界面上,例如,你需要在界面上显示地图,你只需要这样写即可:

<map></map>

使用组件的时候,还可以通过属性传递值给组件,让组件可以以不同的状态去展现,例如,我们希望地图一开始的中心的经纬度是广州,那么你需要声明地图的 longitude(中心经度) 和 latitude(中心纬度) 两个属性:

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

组件的内部行为也会通过事件的形式让开发者可以感知,例如用户点击了地图上的某个标记,你可以在 js 编写 markertap 函数来处理:

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

当然你也可以通过 style 或者 class 来控制组件的外层样式,以便适应你的界面宽度高度等等。

API

为了让开发者可以很方便的调起微信提供的能力,例如获取用户信息、微信支付等等,小程序提供了很多 API 给开发者去使用。

要获取用户的地理位置时,只需要:

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

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

wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})

需要注意的是:多数 API 的回调都是异步,你需要处理好代码逻辑的异步问题。







查看评论

微信小程序中的启动过程

微信小程序中的启动过程小程序的启动小程序启动前,会加载代码到本地。通过读取全局app.json里的pages,就能知道你所有注册的页面。{ &quot;pages&quot;:[ &quo...
  • ssyes123
  • ssyes123
  • 2018-03-30 22:18:56
  • 37

微信小程序调查报告(一)

微信小程序自公布那一刻起,就备受瞩目,如今已过去些时间,随着微信内部即将对外开放小程序发布,势必会掀起一波当年公众号的旋风。让我们拭目以待吧。现结合网络上的资料以及个人对微信小程序官方介绍,作报告一。...
  • wangxindong11
  • wangxindong11
  • 2016-12-07 12:07:53
  • 2036

微信小程序学习篇(一)

Hi! 最新小程序很"火",然后我也就紧跟时代步伐。简单的学习了一下。把笔记记下来,以便自己更好的学习和复习。       言归正传,任何技术学习起来都要先了解一下发展背景:       一、什么是微...
  • liu13722785488
  • liu13722785488
  • 2016-10-14 16:03:37
  • 1722

微信小程序调查报告(四)真的来了

小程序定义:每个程序员都希望可以做出一个运行程序的程序,而小程序正是一个运行程序的程序,但不是系统。 特点: 触手可及,无处不在,扫一扫就可以使用,不用关心是否安装使用的问题,又无需安装卸载。 ...
  • wangxindong11
  • wangxindong11
  • 2016-12-29 20:26:39
  • 1046

微信小程序预研报告

微信小程序预研
  • ITRoadofNoReturn
  • ITRoadofNoReturn
  • 2016-11-12 14:07:12
  • 908

微信小程序调查报告(三)实战

微信小程序api目前已能够支持大部分业务开发,比如网络调用,视频播放,服务器之间的通讯等等。今天就说下如何来开发一个小程序...
  • wangxindong11
  • wangxindong11
  • 2016-12-22 21:43:35
  • 681

微信小程序学习视频

  • 2017年11月27日 10:53
  • 48B
  • 下载

关于微信小程序的那些事

由于小编我app也不会编写代码,java程序也写的不好.可以说优化还没到那步的级别.就是个初学者,虽说学了一年了.在2017年新出了一个重大事件,那就是微信小程序.小编我也抱着试一试的态度搞了搞小程序...
  • qq_37407026
  • qq_37407026
  • 2017-04-12 21:12:59
  • 210

微信小程序学习之路(一)

小程序开发简易教程: 获取AppID https://mp.weixin.qq.com – 设置 – 开发者设置中 下载开发者工具 创建项目 a...
  • github_38847071
  • github_38847071
  • 2017-06-14 17:11:31
  • 1183

微信小程序学习笔记(1)----学习资料整理

微信小程序破解教程微信小程序只对少部分开放公测名额,大部分人都是没有权限,所以想要体验微信小程序开发还是需要破解一下的,破解方法比较简单,GitHub上早已有了破解教程https://github.c...
  • whzhaochao
  • whzhaochao
  • 2016-09-28 16:36:08
  • 3117
    个人资料
    持之以恒
    等级:
    访问量: 912
    积分: 225
    排名: 33万+
    文章分类