微信小程序开发快速开始

一、微信小程序简介

开发者可以快速地开发一个小程序。可以在微信内被便捷地获取和传播，同时具有出色的使用体验。微信小程序开发UniApp

官方网址：https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN

小程序主要运行微信内部，可通过上述网站来整体了解微信小程序的开发。

1.1 注册

在进行小程序开发时，需要先去注册一个小程序，在注册的时候，它实际上又分成了不同的注册的主体。我们可以注册一个小程序，当然，也可以以企业政府、媒体或者其他组织的方式来注册小程序。那么，不同的主体注册小程序，最终开放的权限也是不一样的。比如以个人身份来注册小程序，是无法开通支付权限的。若要提供支付功能，必须是企业、政府或者其它组织等。所以，不同的主体注册小程序后，可开发的功能是不一样的。

1.2 开发者工具

微信小程序我们提供的一些开发的支持，实际上微信的官方是提供了一系列的工具来帮助开发者快速的接入。
并且完成小程序的开发，提供了完善的开发文档，并且专门提供了一个开发者工具，还提供了相应的设计指南，同时也提供了一些小程序体验DEMO，可以快速的体验小程序实现的功能。

1.3 接入流程

开发完一个小程序要上线，也给我们提供了详细地接入流程。

二、小程序开发

开发微信小程序需要做如下准备工作：

• 1.注册小程序。
• 2.完善小程序信息。
• 3.下载开发者工具。

step1.小程序注册：
注册地址：https://mp.weixin.qq.com/wxopen/waregister?action=step1

step2.登录小程序后台
https://mp.weixin.qq.com/

完善小程序信息、小程序类目。
查看小程序的 AppID。

step3.下载开发者工具
下载地址： https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

扫描登录开发者工具。
创建小程序项目。

三、小程序开发

1.1 小程序目录结构

小程序目录：
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：
文件说明：

app.js：必须存在，主要存放小程序的逻辑代码。

app.json：必须存在，小程序配置文件，主要存放小程序的公共配置。

app.wxss: 非必须存在，主要存放小程序公共样式表，类似于前端的CSS样式。

每个小程序页面主要由四个文件组成：

js文件：必须存在，存放页面业务逻辑代码，编写的js代码。

wxml文件：必须存在，存放页面结构，主要是做页面布局，页面效果展示的，类似于HTML页面。

json文件：非必须，存放页面相关的配置。

wxss文件：非必须，存放页面样式表，相当于CSS文件。

1.2 编写小程序

1.进入到index.wxml，编写页面布局：

<view class="container">
  <view>{{msg}}</view>
   <view>
    <button type="default" bindtap="getUserInfo">获取用户信息</button>
    <image style="width: 100px;height: 100px;" src="{{avatarUrl}}"></image>
    {{nickName}}
  </view>
   <view>
    <button type="primary" bindtap="wxlogin">微信登录</button>
    授权码：{{code}}
  </view>
   <view>
    <button type="warn" bindtap="sendRequest">发送请求</button>
    响应结果：{{result}}
  </view>
</view>

2.进入到index.js，编写业务逻辑代码：

Page({
  data:{
    msg:'hello world',
    avatarUrl:'',
    nickName:'',
    code:'',
    result:''
  },
  getUserInfo:function(){
    wx.getUserProfile({
      desc: '获取用户信息',
      success:(res) => {
        console.log(res)
        this.setData({
          avatarUrl:res.userInfo.avatarUrl,
          nickName:res.userInfo.nickName
        })
      }
    })
  },
  wxlogin:function(){
    wx.login({
      success: (res) => {
        console.log("授权码："+res.code)
        this.setData({
          code:res.code
        })
      }
    })
  },
  sendRequest:function(){
    wx.request({
      url: 'http://localhost:8080/user/shop/status',
      method:'GET',
      success:(res) => {
        console.log("响应结果：" + res.data.data)
        this.setData({
          result:res.data.data
        })
      }
    })
  }})

3.编译，点击编译按钮，运行。

1.3 发布小程序

小程序的代码已经开发完毕，要将小程序发布上线，让所有的用户都能使用到这个小程序。

1.点击上传按钮，并指定版本号。提示上传成功。
把代码上传到微信服务器就表示小程序已经发布了吗？
其实并不是。当前小程序版本只是一个开发版本。

2.把代码上传到微信服务器，前小程序版本只是一个开发版本。进到微信公众平台，打开版本管理页面。
需提交审核，变成审核版本。审核通过后，进行发布，变成线上版本。

一旦成为线上版本，这就说明小程序就已经发布上线了，微信用户就可以在微信里面去搜索和使用这个小程序了。