微信小程开发

2小时入门微信小程序开发

Posted by Starbroken on April 3, 2019

什么是微信小程序

小程序是一种不需要下载安装即可使用的应用,它实现了触手可及的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题,应用将无处不在,随时可用,但又无需安装卸载。

——张小龙

目前,小程序有微信小程序、支付宝小程序、百度智能小程序、淘宝轻店铺、字节跳动小程序、快应用等。QQ在不久的未来也可能会出小程序。

开发前的准备

在小程序的开发之前,你需要注册一个微信小程序并下载官方提供的微信开发者工具,建议下载稳定版。

在开发-开发设置中可以找到小程序的AppID

除官方的微信开发工具之外,还可以使用vs code、sublime、webstorm等来进行微信小程序的开发,但是他们并没有小程序开发过程中极为重要的预览功能或者目前这个功能并不完善。

小程序代码构成

样式:wxss-css

骨架:wxml-html

业务:js-js

配置:json

下图描述了这几种结构的分工:

如果把一个小程序/网页比喻成一个完整人,那么wxml/html就是他的骨架,wxss/css决定了他的外观,而js则决定了他提供的功能。当然,这是对最常见的网页/小程序应用的描述,在日新月异的互联网中,我们常常可以看到这三个组合的各种变种。

再举个栗子:

html/wxml

第一张没有皮肤的王昭君可以说就是wxml/html,而有了绚丽皮肤的王昭君我们就可以看作wxml/html用wxss/css装饰过了,而js就相当于她的技能。

怎样学好微信小程序

  1. 基本的技术基础 javascript基础 css特别是flex布局基础 html(xml)基础
  2. 基本的编程思想
  3. 解决问题的能力
    • 熟练应用谷歌、百度等搜索引擎,找到相应的解决办法
    • 学会使用github、StackOverflow、csdn等社区找到解决方案
  4. 自学能力
  5. 学习资料:微信小程序开发文档、各大平台网课、书籍

项目实战(仿QQ音乐)

需求分析

  • 功能确定

  • 系统设计

  • 原型设计 UI、UE等设计

    项目编码

    启动页面实现

app.json

微信小程序的全局配置保存在app.json文件中。开发者通过 使用app.json配置项来配置页面文件(pages)路径、窗口(window)表现、设定网络超时时间值(networkTimeout)以及配置多个切换页(tabBar)等。

除了全局的app.json外,还可以以.json文件对小程序项目中的每一个页面进行配置。页面的.json文件只能 设置window配置项。

app.json中pages路径中的第一个为启动页。

页面生命周期

CSS

  1. 图片路径

    • 标签可以使用本地图片路径,但同样有相对路径与绝对路径之分。/开头代表根目录,../表示向上返回一级目录
    • 本地资源在wxss中无法使用。比如background-image,如果使用的是本地图片,则无法显示。可以使用网络图片来代替本地图片。可以使用七牛云来进行图片的存储
  2. Flex布局菜鸟教程

  3. 小程序rpx单位官方文档

    根据实际情况选择使用px还是rpx

页面路由

  • navigateTo, redirectTo 只能打开非 tabBar 页面。
  • switchTab 只能打开 tabBar 页面。
  • reLaunch 可以打开任意页面。

app.json中的window配置项

navigationStyle:custom对webview组件无效

tabbar图标 阿里矢量图标库

Tip:webview组件

首页实现

圆角轮播图、阴影

参考文献

《微信小程序开发入门与实践》 雷磊著

《小程序,巧应用 微信小程序开发实战》 熊普江 谢宇华著

《微信小程序开发零基础入门》 张凡、陈思含著