微信小程序开发记录

目录

​​开发准备​​

​​创建项目​​

​​开发小程序helloword​​

​​小程序体验​​

​​数据绑定​​

​​事件监听​​

​​列表渲染​​

​​小程序配置​​

​​小程序双线程模型​​

​​小程序启动流程​​

​​注册App()时可以做什么​​

​​注册page()时可以做什么？​​

​​小程序组件​​

​​工具类​​

​​1.时间工具类​​

​​2.缓存工具类​​

开发准备

1.官方文档地址：​​https://developers.weixin.qq.com/miniprogram/dev/framework/​​

可以大概了解一下

2.开发工具下载地址：​​https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html​​

下载傻瓜式安装即可

3.注册地址：​​https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN​​

根据个人需求注册，需要注意的是

a.一个账号对应一个小程序（一个登录账号只能开发一个程序）

b.企业、政府、媒体、组织可以使用同一信息注册50个小程序

c.个体会或者个人可以使用同一信息注册5个小程序

4.注册成功之后进入小程序后台，找到开发菜单，在开发设置中回有一个Appid,这个Appid一会要用，

创建项目

打开我们安装的微信开发工具

填写项目名称，工作环境、appid、开发模式选择小程序、不使用云服务、开发语言使用javascript

工具是中文版，不做过多叙述

开发小程序helloword

我们创建完项目结构如下

上面的目录结构就是一个简单的小程序helloword,效果如下

实际上微信小程序他整个结构最外层就是App(大的框架)，然后包含多个页面（页面直接切换显示内容），每个页面又包含许多组件，如下图是项目的目录结构

而每个结构又有不同的文件如下

知道了一个小程序基本结构之后，我们删除默认创建好的结构，如下

这两个文件是后续开发完的配置信息，就不删除了，开始实现helloword小程序

首先创建App的三个文件app.json 、 app.js、app.wxss

接着需要一个页面比如index,index页面需要创建四个文件index.js index.wxss index.json index.wxml但是为了管理，我们可以先创建一个文件夹page 存放页面，在这个page创建page,工具会自动生成对应的四个文件

修改index.wxml内容为helloword.在app.json中将这个index页面关联

{
  "pages": [
    "page/index/index"
  ]
}

成功创建一个自己的helloword小程序，

小程序体验

数据绑定

// page/index/index.js
//逻辑相关的代码
Page({
  data:{
    name:'hellword'
  }
})
 
 
<!--page/index/index.wxml-->
<!--小程序数据绑定-->
<view>{{name}}</view>

事件监听

// page/index/index.js
//逻辑相关的代码
Page({
  data:{
    couter:0
  },
  handerclick(){
    this.setData({
      couter:this.data.couter+=1
    })
  }
})

<!--小程序数据监听-->
<view>{{couter}}</view>
<button size="mini" bindtap="handerclick">+</button>

列表渲染

<view wx:for="{{stu}}">{{item.id}}---{{item.name}}</view>

Page({
  data: {
    couter: 0,
    stu: [{
        id: 12,
        name: '1111'
      },
      {
        id: 12,
        name: '1111'
      }
    ]
  }
})

小程序配置

通过这些配置提高开发效率以及统一的小程序风格等

官网地址​​https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html​​

主要配置文件：

1.project.config.json:主要是对项目的一些配置比如版本信息 appid等

{
  "description": "项目配置文件",
  "packOptions": {
    "ignore": []
  },
  "setting": {
    "urlCheck": true,
    "es6": true,
    "postcss": true,
    "minified": true,
    "newFeature": true,
    "autoAudits": false,
    "coverView": true,
    "showShadowRootInWxmlPanel": true,
    "scopeDataCheck": false
  },
  "compileType": "miniprogram",
  "libVersion": "2.10.3",
  "appid": "wx4afb207238d80b55",
  "projectname": "proweb",
  "debugOptions": {
    "hidedInDevtools": []
  },
  "isGameTourist": false,
  "simulatorType": "wechat",
  "simulatorPluginLibVersion": {},
  "condition": {
    "search": {
      "current": -1,
      "list": []
    },
    "conversation": {
      "current": -1,
      "list": []
    },
    "game": {
      "currentL": -1,
      "list": []
    },
    "miniprogram": {
      "current": -1,
      "list": []
    }
  }
}

2.sitemap.json：主要是提供微信爬虫检索小程序、相关内容

{
  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{
  "action": "allow",
  "page": "*"
  }]
}

3.app.json：小程序全局的一些配置，三个主要的配置如下

{
  "pages": [
    "page/index/index",
    "page/more/more"
  ],
  "window": {
    "navigationBarBackgroundColor": "#00a1d6",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "项目",
    "backgroundColor": "#eee",
    "backgroundTextStyle": "dark",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "page/index/index",
        "text": "首页",
        "iconPath": "iconPath",
        "selectedIconPath": "selectedIconPath"
      },
      {
        "pagePath": "page/more/more",
        "text": "定制",
        "iconPath": "iconPath",
        "selectedIconPath": "selectedIconPath"
      }
    ]
  }
}

4.page.json:页面配置，每一个小程序页面也可以使用 ​​.json​​​ 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 ​​app.json​​​ 的 ​​window​​ 中相同的配置项。文件内容为一个 JSON 对象

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

小程序双线程模型

小程序是运行在微信客户端

小程序启动流程

首先读取app.json,然后注册app.js，app.js代码如下

官网地址：​​https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html​​

注册App()时可以做什么

1.监听小程序生命周期函数，在函数中执行相关的操作，比如获取用户相关信息、判断小程序进入场景（打开方式，比如微信扫一扫打开 聊天分享打开 另一个小程序打开），可以通过onLaunch和onShow函数中的options参数 其中就有scene值

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次），后台存活两个小时
   */
  onLaunch: function () {
    //比如获取用户信息
    wx.getUserInfo({
      success:function(res){
       // console.log(res)
      }
    })
    
  },

 /**
   * 小程序界面显示出来调用函数
   */
  onShow: function (options) {
    //根据获取场景值（知道小程序是通过那种方式打开的）
    console.log(options)
//获取用户信息并将用户信息发送给服务器
    wx.getUserInfo({
      success:function(res){
        
      }
    })
  },

  /**
   * 小程序界面被隐藏时候执行
   */
  onHide: function () {
    
  },

  /**
   * 小程序发生错误的时候执行
   */
  onError: function (msg) {
    
  }
})

更多场景之地址：​​https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/scene.html​​

备注：小程序中获取用户信息上面的wx.getUserInfo（微信可能以后废弃）接口之外 ，还有一下两种方式获取用户信息

//第二种
<button size="mini" open-type="getUserInfo" bindgetuserinfo="getUserInfo">授权</button>
//事件监听 这个event中就包括用户信息
getUserInfo(event){
    console.log(event)
  }

//第三种：直接展示用户信息
<open-data type="userNickName"></open-data>
<open-data type="userAvatarUrl"></open-data>
注意：type更多值地址
https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html

2.App()实例只有一个，并且是全局共享的（单列对象），所以我们可以将一些共享数据放在这里

App({

  //除了默认的函数 我们可以自定义函数
  myglobaldata:{
    name:'java项目'
  }
})

在页面的js中如何使用？
const app = getApp()
const name = app.myglobaldata.name

注册page()时可以做什么？

每个页面都有一个js文件，其中调用Page方法注册页面实例

Page({
  //第一件事：初始化数据
  data: {
    name:'zhangsan',
    list:[]
  },
  //第二件事：监听wxml（点击、等）事件
  findpro(){
    
  },
  //第三件事：生命周期函数中发送网络请求获取数据
  onShow(){
    wx.request({
      url: 'http://xxxx.',//开发的时候可以在工具栏详情中关闭合法域名检测
      success:(res)=>{
        const data = res.data.data;
        this.setData({
          list:data
        })
      },
    })
  },
  //备注：上面接受结果使用了箭头函数，其中的this会一层层找到data中的数据，但是如果用函数则要用如下方法
  onShow() {
    const _this = this;
    wx.request({
      url: 'http://xxxx.',//开发的时候可以在工具栏详情中关闭合法域名检测
      success:function() {
        const data = res.data.data;
        this.setData({
          list:data
        })
      },
    })
  },
  //第四件事：监听其他时间 比如页面滚动，下拉加载,滚动到底部
  onPageScroll(){

  },
  onPullDownRefresh(){

  },
  onReachBottom(){

  }

})

函数官网地址：​​https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html​​

小程序组件

文档地址​​https://developers.weixin.qq.com/miniprogram/dev/component/​​

工具类

1.时间工具类

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

//只返回日期
  return [year, month, day].map(formatNumber).join('/')
//返回日期和时间  
//return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime
}

使用：

// 第一步：引入
const util = require('../../../utils/timeutil.js')
Page({
//第二步：使用
  onLoad: function () {
    this.setData({
      time: util.formatTime(new Date())
    })
  }
})

2.缓存工具类

//缓存工具类
var redis = "redis"

/**
 * 设置
 * k 键key
 * v 值value
 * t 秒
 */
function put(k, v, t) {
  wx.setStorageSync(k, v)
  var seconds = parseInt(t)
  if (seconds > 0) {
    var newtime = Date.parse(new Date())
    newtime = newtime / 1000 + seconds;
    wx.setStorageSync(k + redis, newtime + "")
  } else {
    wx.removeStorageSync(k + redis)
  }
}
/**
 * 获取
 * k 键key
 */
function get(k) {
  var deadtime = parseInt(wx.getStorageSync(k + redis))
  if (deadtime) {
    if (parseInt(deadtime) < Date.parse(new Date()) / 1000) {
      wx.removeStorageSync(k);
      console.log("过期了")
      return null
    }
  }
  var res = wx.getStorageSync(k)
  if (res) {
    return res
  } else {
    return null
  }
}

/**
 * 删除
 */
function remove(k) {
  wx.removeStorageSync(k);
  wx.removeStorageSync(k + redis);
}

/**
 * 清除所有key
 */
function clear() {
  wx.clearStorageSync();
}
module.exports = {
  put,
  get,
  remove,
  clear
}

使用同上app.js

const TOKEN = 'token'
const USERID = 'userid'
App({

  globaldata: {
    token: '',
    userid: ''
  },
  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function() {
    //先从缓存获取token 看有没有
    const token = wx.getStorageSync(TOKEN);
    console.log(token+"===============")
    //判断token是否存在
    if (token && token.length != 0) {
      console.log("第一步")
      //判断token是否过期
      wx.request({
        url: 'http://localhost/authologin',
        data: {
          token: token
        },
        success:(res)=>{
          console.log("第三步")
          if(res.data.status==200){
            console.log("第4步")
            this.globaldata.token=token;
          }else{
            console.log("第5步")
            this.login();
          }
        }
      })
    } else {
      console.log("第二步")
      this.login();
    }
  },
  login() {
    wx.qy.login({
      success: (res) => {
        if (res.code) {
          console.log(res.code)
          //发起网络请求
          wx.request({
            url: 'http://localhost/authologin',
           
            success: (res) => {
              const token = res.data.data.access_token;
              const userid = res.data.data.userid;
              this.globaldata.token = token;
              this.globaldata.userid = userid;
              wx.setStorageSync(TOKEN, token); //本地存储
              wx.setStorageSync(USERID, userid);
            }
          })
        } else {
          console.log('登录失败！' + res.errMsg)
        }
      }
    });
  },
 
})