StepByStep前端科普系列(005)-MiniProgram微信小程序1小时入门

MinusCode
121 阅读5分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天，点击查看活动详情

Step 1: 账号注册与登录

image.png

image.png

Step 2: 官方开发指南

安装并打开IDE，新建项目，CTRL+shift+N

选择，Use no cloud service

然后，选择基础模板

image.png

Step 3: 工程目录 开发界面

image.png

这里以官方示例demo做展示

3.1 创建image文件夹，导入两张图片

3.2 修改 index.wxml文件，加入 image标签

// mode 限定拉伸效果
<image src="../../image/banner1.jpg" mode="widthFix"/>

3.3 修改 index.wxss文件，给image加入样式

image {
// 图片宽度铺满
  width: 100%;
}

Step 4: 预览 选中，图示中的preview，此时会生成一个二维码

image.png

微信扫码，此时可在手机上看到效果。

Step 5：在index.wxml中，通过view标签加入文字，示例如下

<view class="title">
  文章标题
</view>

<view class="content">
  小程序是一种新的开放能力，可以在微信内被便捷地获取和传播，同时具有出色的使用体验。小程序开发者可在小程序内提供便捷、丰富的服务，如预订、商品购买、游戏、信息 ...
</view>

Step 6:在index.wxss中修改样式

.title {
  text-align: center;
  font-size: 20px;
  color: coral;
}
.content {
  padding: 30px;
}

此时效果如下图：(可将模拟器 detach 用独立浮窗来本地预览，增加调试控制台的空间)

image.png

Step 7:版本上传 Upload

image.png

版本管理

image.png

提交审核 --- 开发阶段选择 体验版 生成二维码后可在手机上看当前效果 image.png

  1. 微信通过JS-SDK对外暴露微信自身的一些接口，使得开发者具备使用微信的原生能力。JS-SDK是对之前的 WeixinJSBridge 的一个包装。

  2. 小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。

Step 8:小程序工程概览

image.png

配置项：

小程序配置 app.json

涉及小程序所有页面路径，对应pages字段（数组），界面表现，window字段定义小程序所有的页面顶部背景颜色文字颜色等，网络超时时间，底部tag等。

工具配置(开发环境配置，界面颜色等) project.config.json

页面配置 pages/*****/****.json

pages文件夹下子文件夹中的json，独立定义每个页面的属性

WXML 模板

小程序中的标签有 view , button , text等。采用MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

WXSS样式

  1. 新增 rpx 尺寸单位
  2. 全局样式 app.wxss 作用于小程序所有页面、局部样式 page.wxss仅对当前页面生效
  3. wxss仅支持部分css选择器

JS 交互部分

Page({

   })

Page({

    data:{},
    
    方法1(){},
    
    方法2：function(){},

   })

Step 9: 小程序的宿主环境

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

小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用 JsCore 线程运行 JS 脚本。一个小程序存在多个界面，所以渲染层存在多个 WebView 线程，这两个线程的通信会经由微信客户端做中转，逻辑层发送网络请求也经由 Native 转发，小程序的通信模型下图所示。

程序与界面

微信在打开小程序之前会把整个小程序代码包下载到本地，接着通过 app.json 的pages字段获取当前小程序所有界面路径，其中写在pages字段的第一个路径是小程序的首页。

程序启动后，app.js定义的App实例的onLaunch回调会被执行。整个程序只有一个App实例，由全部页面共享。

// app.js
App({
  // 小程序启动之后 触发
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

页面的加载过程 pages/××/××

Page是一个页面构造器，小程序框架把data数据和wxml一起渲染出最终结构，渲染完成后，页面实例会收到onLoad回调

  1. 首先，根据 ××.json 配置生成一个界面，如顶部颜色和文字都可在此定义
  2. 然后，装载这个页面的WXML结构和WXSS样式
  3. 最后，装载对应的js文件
Page({
  data: { // 参与页面渲染的数据
    logs: []
  },
  onLoad: function () {
    // 页面渲染后 执行
  }
})

组件

小程序提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼合成自己的小程序。组件就像 HTML 的 div, p 等标签一样，在小程序里边，你只需要在 WXML 写上对应的组件标签名字就可以把该组件显示在界面上。如：

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

API

调起微信提供的能力，例如获取用户信息、微信支付等。多数 API 的回调都是异步，你需要处理好代码逻辑的异步问题。

获取用户地理位置信息

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

调用微信扫一扫

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

Next 参考资料

  1. 《小程序开发指南》

  2. 框架、运行时、渲染引擎、自定义组件、插件、基础能力

image.png

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天，点击查看活动详情

avatar
文章
阅读
粉丝