微信小程序入门篇

最新推荐文章于 2024-08-30 16:02:47 发布

三爷麋了鹿

最新推荐文章于 2024-08-30 16:02:47 发布

阅读量304

点赞数

分类专栏：微信开发

本文链接：https://blog.csdn.net/u800820/article/details/103578903

版权

微信开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文简单介绍如何完成一个微信小程序入门demo的开发，以及它与WEB开发有何异同。
适合初学者学习，有HTML/CSS/Vue.js基础的同学将更容易理解文章的对比角度。

安装开发工具

工欲善其事必先利其器，小程序开发使用的IDE是——微信开发者工具。
前往开发者工具下载页面，根据自己的操作系统下载对应的安装包进行安装。
打开小程序开发者工具后，需用微信扫码登录开发者工具。

微信扫码登录

账号申请

小程序开发需要一个AppID，小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID （注意这里要区别于服务号或订阅号的 AppID）。

如果是正式项目，需要进入小程序注册页根据指引填写信息和提交相应的资料，注册自己的小程序帐号。
然后再登录小程序后台，在菜单 “设置”-“开发设置” 就可以看到小程序的 AppID 了。

由于本文讲解小程序demo，使用的是开发工具中提供的测试AppID。

测试APPID

小程序与网页开发的区别

1.小程序的主要开发语言是 JavaScript，是由微信中的 WebView衍生出来供开发者调用的JS API。
2.网页开发和小程序的区别：

网页开发渲染线程和脚本线程是互斥的，网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。
小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。
jQuery、 Zepto 等，在小程序中是无法运行的，一些 NPM 的包在小程序中也是无法运行的。

3.小程序包含一个描述整体程序的 app 和多个描述各自页面的 page，代码目录如下图：

代码目录

小程序宿主环境

我们称微信客户端给小程序所提供的环境为宿主环境。
小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。
小程序的渲染层和逻辑层分别由2个线程管理：
渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。

程序与页面

通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径：
写在 pages 字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）。

小程序代码构成

JSON配置

JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。
1. app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
2. project.config.json 在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
3. page.json 指的是用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。让开发者可以独立定义每个页面的一些属性，例如顶部颜色、是否允许下拉刷新等等。

{
  "pages": [
    "pages/index/index",
    "pages/me/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#DF0029",
    "navigationBarTitleText": "签到打卡",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "color": "#000",
    "selectedColor": "#426EB4",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "打卡",
        "iconPath": "images/index/sign_gray.png",
        "selectedIconPath": "images/index/sign_blue.png"
      },
      {
        "pagePath": "pages/me/index",
        "text": "我的",
        "iconPath": "images/me/me_gray.png",
        "selectedIconPath": "images/me/me_blue.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

WXML 模板

1. 标签名字有点不一样
换个思路，既然大家都需要这些组件，为什么我们不能把这些常用的组件包装起来，大大提高我们的开发效率。
2.多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。
通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

<!--index.wxml-->
<view class="container">
  <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="16" show-location style="width: 100%; height: 360px;">
  </map>
  <view class="bottom">
    <button type="primary" open-type="getUserInfo" plain="true" lang="zh_CN" bindtap="bindViewTap">签到</button>
  </view>
</view>

WXSS 样式

1. 新增了尺寸单位。
在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。
2. 提供了全局的样式和局部样式。
你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
3. WXSS 仅支持部分 CSS 选择器

/**index.wxss**/
.container{
  padding: 0;
}
.bottom{
  padding: 1.5rem 0;
}

JS 逻辑交互

在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

//index.js
Page({
  data: {
    latitude: 29.61612895289891,
    longitude: 106.50210664019774
  },
  //事件处理函数
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  }
})

事件

1.什么是事件
事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如 id, dataset, touches
2.使用事件
如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。