【微信小程序】如何从0到1开发一个小程序应用

385 阅读2分钟

一、开始前准备

二、初始化一个小程序

  • 新建一个空文件夹
  • 打开微信开发工具,新建你的第一个小程序
  • 目录结构

文件解析:

/api        接口文件
/assets     静态文件
/components 自定义组件
/pages      页面
/styles     公共样式
/utils      公共js
app.js      系统的方法处理文件
app.json    系统全局配置文件
app.wxss    全局的样式表

三、接口请求封装

config.js

export const config = {
  baseUrl: 'xxx' // 接口地址
}

request.js

const { config } = require('./config.js')

export const request = (url, data, method) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: config.baseUrl + url,
      method: method ? method : 'GET',
      header: {
        'content-type': 'application/json',
        accesstoken: wx.getStorageSync('token')
          ? wx.getStorageSync('token')
          : ''
      },
      data: data,
      success(res) {
        const data = res.data
        if (data.code == 200) {
          resolve(data.data)
        } else {
          // 登录失效
          if (data.code == 20526) {
            wx.login({
              success: res => {
                // 发送 res.code 到后台换取 openId, sessionKey, unionId
                wx.request({
                  url: `${config.baseUrl}/apartment-auth/wx/user/authCode/${res.code}`,
                  success(resp) {
                    wx.setStorageSync('token', resp.header.accessToken)
                    if (resp.data.code == 200) {
                      var page = getCurrentPages().pop() //获取当前页面实例
                      if (page == undefined || page == null) return
                      page.onShow() //调用实例的初始化方法重新加载数据;
                      
                      if (!resp.data.data.phone) {
                        wx.navigateTo({
                          url: '/pages/auth/index'
                        })
                      }
                      wx.setStorageSync('phone', resp.data.data.phone)
                    }
                  }
                })
              }
            })
          } else {
            // console.log(res)
            wx.showToast({
              title: data.msg,
              icon: 'none',
              duration: 2000
            })
            reject(res)
          }
        }
      },
      fail(res) {
        // console.log(res)
        wx.showToast({
          title: '服务不可用',
          icon: 'none',
          duration: 2000
        })
        reject(new Error(res))
      }
    })
  })
}

api.js

import {
  request
} from './request.js'

// 微信授权登录
export const authLogin = (data) => request(`/apartment-auth/wx/user/authCode/${data}`)
// 登录
export const login = data => request(`/apartment-auth/wx/user/login`, data, 'post')

页面中使用

import { login } from '../../api/api'

四、本地调试接口

需要在微信开发工具基本设置中选择不校验合法域名,https证书

五、上传体验版本

上传代码后,管理平台设为体验版,此时会生成二维码。体验人员扫描后进入小程序,需要点击右上角三个点,设为调试模式才可调用接口。

注:如果使用的是内网,手机也要连相应的内网Wi-Fi

六、正式上线

正式上线需要https,以及配置合法域名

微信小程序域名备案问题:

不备案的话,是无法请求数据的;所以是无法上线的;

微信要求https的基本要求就是:

  1. 备案
  2. 不带端口

备案的话,快的话十天左右就可以了

官方审核时间:1~3天,7天内未审核的催审问题暂不予反馈

官方回答:审核是按照小程序提交顺序进行的,审核时长与当前等待审核的单量成正比

审核规则

  1. 提交的版本最好不要有测试数据以及空数据
  2. 有账号登录的要提供测试账号
  3. 对于获取用户信息,地理信息要给用户提供授权操作