微信小程序初体验

IMWeb前端团队

发布于 2019-12-05 12:00:40

5570

发布于 2019-12-05 12:00:40

文章被收录于专栏：IMWeb前端团队IMWeb前端团队

本文作者：IMWeb 黎清龙原文出处：IMWeb社区 未经同意，禁止转载

微信小程序初体验

1 背景

微信小程序刚出来的时候就想玩玩了，个人开发者开放了，终于可以玩玩了~

2 账号相关

注册账号跟着文档来就好了，文档请看这里

微信的文档还是很不错的，值得学习

3 通过文档整体理解

我把微信小程序当做一个框架来探索，因为它的基本语法还是前端，因此对我（前端）来说，并不是一门新的语言

因此，我认为把它作为一个框架更加合适

以下是我在通读微信小程序的官方文档之后的一些理解

3.1 完整&独立的开发体验

虽然我把它当做一个框架来体验，但是对于微信小程序本来说，它还是一个新语言：

它只是用了前端语法，但是它同时又不是完全的前端语法：

比如 wxml 是使用自己的标签组件
比如它的 wxss 只是 css 的子集
比如它的 js 没有 window对象等等

因此，作为一门新语言，它该有的东西实际上都有了，比如：

文档
编辑器
调试器
编译器
基础库

实际上，开发者不需要有任何的基础，就可以上手开发微信小程序，当然，如果有前端开发经验的话，上手就会更快

3.2 完整的框架

注意，我说的是框架，并不是组件库，一个微信小程序包含以下内容：

App，单例
Pages，多个页面，一个 App 包含多个 Page
components，组件，每个 Page 都是由 component 组成，微信有自己的组件库
App 和 Page 都有可理解的生命周期

3.3 类 Vue 的语法

微信小程序这个框架和 Vue 实在是太像太像了，知道 Vue 的，做过微信小程序都应该会有这种感觉

数据双向绑定
模板语法

3.4 类 React Native 的开发体验

同时微信小程序和 React Native 很像，那就是只能使用框架底层提供的基础组件库

这个基础组件库的底层原理应该也差不多，都是对不同 mobileOS 的底层进行抽象封装，实际上，它们俩有很多组件都是一样的，不是吗？

3.5 缺点

目前限制很多，就像开发微信公众号那样，权限限制比较严格，实际上很多开放接口也就是微信公众号的接口了
无法自定义扩展

肯定还会有许多缺点，但是笔者还没开发过，所以肯定是不知道的了

4 简单的小栗子

作为腾讯课堂的前端开发一枚，举栗子当然要用自家产品啦，下面简单实现一个类目首页的小程序

内容很简单，同样的，代码也很简单

4.1 创建项目

创建项目的时候，就不要勾选默认的 quick start 项目啦，我们从空项目开始，但是一些内容倒是可以借鉴的~

4.2 注册 App

在根目录，新建app.js和app.json，内容如下：

//app.js
App({
    onLaunch: function() {
        console.log('hello')
    }
})

app.js内容很简单，其实注册 App 的时候根本就不需要任何内容，因为我们不需要用到 App 的生命周期方法和全局数据

我会告诉你这只是用来测试程序能不能跑起来吗？

{
  "pages":[
    "pages/index/index",
    "pages/detail/detail"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "腾讯课堂-公务员类目",
    "navigationBarTextStyle":"black"
  }
}

app.json是从 quick start 项目 copy 过来改改的，"page" 就改了 detail 页面，就是详情页啦，"window" 就改了导航的文案

4.3 注册首页 index

新建 pages 文件夹，然后新建 index 文件夹，然后只要在 /app.json 的 "pages" 里面，添加 "pages/index/index"

Ctrl + s保存，编辑器就会自动帮我们生成一个页面的基本文件结构啦： index.js、index.json、index.wxml、index.wxss

首先我们先写页面结构 index.wxml：

<!--pages/index/index.wxml-->
<scroll-view scroll-y class="container">
  <view class="hot">
    <text class="title">{{hot_title}}</text>
    <view class="course" wx:for="{{hot_list}}" wx:for-item="hot_item" wx:key="*this" bindtap="bindCourseTap" data-name="{{hot_item.name}}">
      <image class="course-img" src="{{hot_item.cover_url + '220'}}" background-size="cover"></image>
      <text class="course-name">{{hot_item.name}}</text>
    </view>
  </view>

  <view class="new">
    <text class="title">{{new_title}}</text>
    <view class="course" wx:for="{{new_list}}" wx:for-item="new_item" wx:key="*this" bindtap="bindCourseTap" data-name="{{hot_item.name}}">
      <image class="course-img" src="{{new_item.cover_url + '220'}}" background-size="cover"></image>
      <text class="course-name">{{new_item.name}}</text>
    </view>
  </view>
</scroll-view>

页面很简单，就两个模块：热门课程模块和最新课程模块，都是课程页卡列表，课程页卡也很简单，就一个封面图和课程名称

实际上课程页卡这里可以使用模块语法，但是作者偷懒了，更多高级语法文档都有写，这里只是简单的栗子

然后当然是页面样式 index.wxss

/* pages/index/index.wxss */
.container {
  height: 100%;
}

.title {
  text-align: center;
  font-weight: bold;
  display: block;
  font-size: 48rpx;
  line-height: 60rpx;
  margin: 30rpx 0 20rpx;
}

.course {
  width: 375rpx;
  padding: 0 10rpx;
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  margin-bottom: 20rpx;
}

.course-img {
  width: 100%;
  height: 205rpx;
  border-radius: 5rpx;
}

.course-name {
  margin-top: 10rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: normal;
  width: 100%;
  display: block;
}

样式没什么好说的，都是 css 语法

最后就是页面逻辑 index.js

//index.js
//获取应用实例
Page({
  data: {
    hot_title: '',
    hot_list: [],
    new_title: '',
    new_list: []
  },
  bindCourseTap: function (e) {
    wx.navigateTo({
      url: '../../pages/detail/detail?name=' + e.currentTarget.dataset.name
    })
  },
  filter: function (list) {
    var ret = [];
    var item;
    for (var i = 0, l = list.length; i < l; ++i) {
      item = list[i];
      if (item.name && item.cover_url) {
        ret.push(item);
      }
    }

    return ret;
  },
  onLoad: function () {
    var self = this;

    wx.showLoading({
      mask: true,
      title: '课程加载中...',
      success: function () {
        wx.request({
          url: 'https://sas.qq.com/cgi-bin/ke_official_index',
          success: function (res) {
            self.setData({
              hot_title: '热门课程',
              hot_list: self.filter(res.data.result.hotCourse),
              new_title: '最新课程',
              new_list: self.filter(res.data.result.newCourse)
            })
          },
          complete: function () {
            wx.hideLoading();
          }
        })
      }
    });
  }
})

页面逻辑也非常简单，写过 vue 的同学都很熟悉，页面渲染过程就是：

showLoading => request data => render => hideLoading

课程页卡的点击事件就是导航到详情页，同时把课程名称带上（原因后面再说）

首页我们就搞定啦~

4.4 注册课程详情页 detail

和首页一样，创建好目录，在 /app.json 的 "pages" 添加页面路径保存即可

然后同样的内容，直接看结果：

<!--pages/detail/detail.wxml-->
<text class="tips">欢迎，你选择学习的课程是：</text>
<text class="name">{{name}}</text>

/* pages/detail/detail.wxss */
.tips {
  display: block;
}

.name {
  display: block;
  font-size: 40rpx;
  line-height: 80rpx;
}

// pages/detail/detail.js
Page({
  data: {
    name: ''
  },
  onLoad: function (options) {
    this.setData({
      name: options.name
    });
  }
})

没错，作者又偷懒了，课程详情页就是只展示一个课程名称而已！