文章目录
  1. 1. 环境配置
    1. 1.1. 申请账号
    2. 1.2. 安装开发工具
    3. 1.3. Hello World
  2. 2. 项目结构介绍
    1. 2.1. APP.JSON
    2. 2.2. WXML
    3. 2.3. WXSS
    4. 2.4. JavaScript
  3. 3. 上线
    1. 3.1. 预览
    2. 3.2. 提交审核
    3. 3.3. 发布
  4. 4. Samples

微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

环境配置

申请账号

访问 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根据提示完成注册账号。注册完成后,登陆 https://mp.weixin.qq.com ,在设置-开发设置中可以找到小程序 AppID。

安装开发工具

微信小程序开发工具下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201818
开发工具详细介绍见:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html?t=201818

Hello World

打开微信开发者工具,登录后点击右下角”+”按钮,进入如下界面:

Project Init

选择项目目录,填写刚刚申请的 AppID 和x项目名称。并选中”建立普通快速启动模板”。点击创建,Hello World就创建出来了。

项目结构介绍

项目目录结构如图:

Project Info

APP.JSON

app.json 是对当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

例子:

1
2
3
4
5
6
7
8
9
10
11
12
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}

pages 和 window 介绍:

  1. pages字段:用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
  2. window字段:小程序所有页面的顶部背景颜色,文字颜色定义在这里的。

WXML

类似网页编程的HTML,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>

从上面代码可以看出,代码风格很像HTML,同时也有自己的语法如wx:if和wx:else。更多语法请参考 https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/

WXSS

WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改。示例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}

.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}

.userinfo-nickname {
color: #aaa;
}

.usermotto {
margin-top: 200px;
}

更多详细请参考 https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html

JavaScript

和用户交互需要使用 JavaScript 来实现。我们常见的网络请求,事件处理等都有 JavaScript 来处理。关于 JavaScript 这里不做介绍了。

上线

预览

如果开发中需要预览和测试,微信需要添加相应的权限。添加预览入口:小程序管理后台 - 用户身份 – 成员管理。

添加不会推送告知被添加者。添加成功之后,使用被添加者的微信,扫描微信开发工具生成的预览二维码就可以看到开发的微信小程序了。

提交审核

开发完成,通过点击微信开发者工具右上角的上传,可以上传到小程序管理后台。在开发管理中可以找到提交的版本。这个时候的版本还是预览版本,通过扫描二维码,可以让添加权限的微信用户体验。

如果测试确认没问题可以上线,点击管理后台-开发管理中的提交审核。提交审核,第一个版本审核时间可能会有几天,之后审核时间会缩短大概一天左右。

发布

审核通过之后,管理员会收到微信推送。这个时候,我们的小程序还没有上线,我们可以再后天点击发布按钮来控制什么时间发布。

Samples

官方例子我的例子
Weixin DemoWeixin Demo
源码地址:https://github.com/jingle1267/demo源码地址:https://github.com/jingle1267/HelloCodeDev


本文地址 http://94275.cn/2018/01/10/weixin-app/ 作者为 Zhenguo

author:Zhenguo
Author: Zhenguo      Blog: 94275.cn/     Email: jinzhenguo1990@gmail.com
I have almost 10 years of application development experience and have a keen interested in the latest emerging technologies. I use my spare time to turn my experience, ideas and love for IT tech into informative articles, tutorials and more in hope to help others and learn more.
文章目录
  1. 1. 环境配置
    1. 1.1. 申请账号
    2. 1.2. 安装开发工具
    3. 1.3. Hello World
  2. 2. 项目结构介绍
    1. 2.1. APP.JSON
    2. 2.2. WXML
    3. 2.3. WXSS
    4. 2.4. JavaScript
  3. 3. 上线
    1. 3.1. 预览
    2. 3.2. 提交审核
    3. 3.3. 发布
  4. 4. Samples
返回顶部