后台学微信小程序-初识

最近和朋友准备一起做个小程序玩一下,已经近两年没怎么动过前端的我就开始研究起了小程序。
小程序几乎是一个全前台的东西。所以,js和css的基础是一定要的。如果这两个空白的话,就可以不用往下面看了。

注册小程序账号

在这个地址注册:https://mp.weixin.qq.com/wxopen/waregister?action=step1
注册完成登录后,按照提示完成基本信息,可以在开发设置里面看到appId。
小程序的后台首页很清晰滴说明了小程序的发布流程。

wx0.png

下载开发工具

在这个地址下载小程序开发工具
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
提供windows和mac版,直接下载,正常安装即可。

项目结构

创建项目

创建项目时AppID可以不填。选择快速启动,创建我们的第一个可运行小程序。

wx1.png

点击确认,创建第一个小程序。可以看到界面如下:
IDE的布局可以参见下图。作为一个后台开发人员的感觉,这个IDE显得很清新脱俗呀。
工具上面的按钮都可以点一点,这个IDE还是蛮好用的。
wx2.png

重点来了,我们看编辑器的代码目录。
其中,pages目录是页面集合,里面放的就是小程序里定义的页面。
utils目录是一些公共js函数文件集合,可以理解成工具库。
剩下的几个文件先暂时跳过。先看一下,小程序里面涉及到的后缀名。

  • *.js
  • *.json
  • *.wxss
  • *.wxml
    wxml和wxss可以和我们传统的html,css对应起来。只是wxml里面的标签都是微信自己搞的。wxss和css的语法几乎一样。

js就更不用说了,只要你做过web,多多少少都写过几行js。
主要就是这个json,json一般在后台程序里面多用来做数据传输的格式载体,但是回忆下,sublime和vscode之类的编辑器都用json格式的文件来做配置。这里的json也是配置文件,配置一些不变的属性。

UI

UI是个老大难,特别是我等苦逼的后台开发者。索性微信有一套自己的UI提供了小程序版本的。可以直接拿来用。具体参见下面地址。
https://github.com/Tencent/weui-wxss

ok,到这里小程序的感观应该都有了,如果还有不清楚的,下面留言讨论,作者也是学一点,分享一点。
下一篇我们通过一个简单的页面了解下微信的小程序布局相关和weui,iconfont的使用。

Last modification:February 4th, 2018 at 01:28 pm

Leave a Comment