小程序开发流程及踩坑随记申请，并认证（未认证不能发布，认证需要300元，目前只支持企业认证）详细见官网说明。 PS.这里

开发准备

申请，并认证（未认证不能发布，认证需要300元，目前只支持企业认证）详细见官网说明。官网链接
登录后台，获取appid，填写相关信息官网链接
获取appid，下载开发者工具官网链接
新建项目，把appid填入（注意要不要云开发，我是没用的）

好啦，准备好可以开发拉~~

项目文件

话不多说，上图

comonents -- 组件代码文件（话不多说，看官方文档）
miniprogram_npm -- npm包生成文件（话不多说，看官方文档）
PS.这里要注意下如果按照官方文档生成不出来miniprogram_npm文件夹。。。。可以让朋友给你传一个~
pages -- 页面文件（这个没什么多说的，原生限制比较多，还是按照官网文档开发）
untils -- 公共方法文件
大项目可能要提取公共方法，建于我只用到的dayjs,lodash都是npm安装的，所以没动过。
app.* -- 全局配置文件

//app.js

// 后端接口服务地址
var serverUrl = "****";

App({
  // onLaunch 这个方法是当小程序加载完毕后就执行的方法
  onLaunch: function () {
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  // onShow 方法是在每次从小程序的前后台切换时都执行的
  onShow: function () {
    // 要获取一些全局对象
    this.ajax("/api/global", 'get',{status: 'sale'}).then(res => {
      const {data = [],saleSuburb = [],rentSuburb = []} = res.data;
      
      this.globalData.saleSuburb  = saleSuburb
      this.globalData.rentSuburb  = rentSuburb
    });
  },
  // 登录接口
  login: function () {
    // 登录
    wx.login({
      success: res => {
        this.ajax("/api/wechat/login", 'post',{
          code: res.code,
          ...this.globalData.userInfo
        }).then(res => {
            wx.setStorageSync('openId', res.data.weapp_openid)
            wx.setStorageSync('sessionKey', res.data.weapp_session_key)
        })
      }
    })
  },
  // 简单封装了请求
  ajax(url, method, data) {
    let header = {
      "openid": wx.getStorageSync("openId"),
      "sessionKey": wx.getStorageSync("sessionkey")
    }
    
    let userurl = serverUrl + url
    return new Promise((resolve, reject) => {
      wx.request({
        url: userurl,
        method: method,
        data: data,
        header: header,
        success: function(res) {
          if (res.statusCode == 200) {
            if (res.data.code == 401){
              wx.redirectTo({
                url: "/pages/index/index",
              })
            }
            resolve(res.data);
          } else {
            if (res.statusCode == 500) {
              that.globalData.islogin = true
            }
            reject(res.data);
          }
        },
        fail: (res => {
          console.log(res)
          wx.hideLoading();
          wx.showToast({
            title: "网络差，请稍后再试！",
            icon: "none",
            duration: 1500
          })
          reject("网络差，请稍后再试！");
        })
      })
    })
  },
  globalData: {
    userInfo: null,
    saleSuburb:[],
    rentSuburb:[],
  }
})

// app.json 全局配置项 忽略了
// app.wxss 全局样式 忽略了

乍一看是不是vue的超级简化版本。。。做的时候感觉也是，而且好多功能都没有实现。所以写的时候是真难受啊！！！！
好啦，接下来就是开发出现的问题，~~

项目遇到的问题及解决方案

1. 写全屏淡出框插件的时候，发现组件的高度100%没有继承，组件的高为0

形成原因：page标签没有高度，所以没办法继承
解决方案：在app.wxss里对page标签赋值高度100%
PS.注意微信小程序明确表示 css选择器不支持id 标签选择器。测试虽然能警告，但是还是能解析的。。。但是还是尽量别用了。

2. 本地调试正常，测试环境无法解析await async语法糖

形成原因：上传的时候打包的问题

解决方案：小程序工具 - 右上角详情 - 增强编译点开就好了（朋友说有的机型不适配，请慎用，写习惯了真有点烦）

3. 图片打包后体积大于2M

形成原因：我最开始是图片太多了

解决方案：我们解决的办法是吧icon文件变成字体图标。 image文件图片上传到服务器。剩下的图片压缩在压缩（在线压缩网址）。从2.6M到200+kb。

解决方案2：大项目实在不是图片的原因，可以执行分包。网上有明确的步骤。这里就不细说了，但是单个大小也不能超过2M，所有分包不能超过4M（分包介绍）

4. 100M视频，用video标签需要全不加载完毕后才能播放。的等待时间太长

形成原因：视频过大，不能一边缓存一边播放

解决方案：使用腾讯小程序插件，简单，方便。缺点有广告。。。（使用教程）

5. 链接公众号文章

形成原因：外链

解决方案：首先绑定关联公众号，然后详情用web-view标签打开（使用教程）
PS.以为列表也是直接代理的微信的公众号列表，这里有个问题是返回无用数据过大。10条数据就500kb的json了，小程序会警告，所以需要后台处理下。不能直接返回。

6. 获取手机号

形成原因：button触发了获取手机事件后再拉去的wx.login的code，加密跟解密用的session_key虽然登录有效，但是不是一个。这个有点烦。用是否登录判断不出来两个sessionkey不一致。。。

解决方案：在页面onload生命周期先login登录。再触发button事件

7. 好多方法不能用了要用button触发，是真坑... eq:wx.getUserInfo,wx.getSetting等

形成原因：官方说怕恶意直接调用触发事件

解决方案：强制加弹出层加button让用户点击。。。

2020.05.28,果然申请失败了有了如下新问题

8. 登录页面不符合规范

形成原因：首页上来就有弹出框，提示用户登录

解决方案：（官网规范地址）先明确规范再来说方案吧。
1.这次吧需要登录的地方统一弹出跳转登录窗口，点击跳到我的页面唯一一处登录的地方。
2.然后点击登录按钮再弹出登录窗口，还要有暂不登录选项

2020.05.28,上线一周添加分享功能

9. 详情页面分享需要登录

形成原因：首页分享没问题，详情页面分享后需要跳转到登录页面成功后在返回。应为登录页面在tab下，wx.switchTab会删掉所有的非tab历史记录。所以wx.navigateBack()没办法返回。

解决方案：
1.在详情页面判断是否登录，未登录跳转到tab登录页面（这里不让弹出直接登录，参照上面8问题）期间吧当前页面地址存入storage里。
2.然后点击登录按钮从storage里取出要返回的页面，跳转

如果这篇文章有用，欢迎评论, 点赞, 加关注。

我是leo：祝大家早日升职加薪。

小程序开发流程及踩坑随记