微信小程序开发记录

爱被打了一巴掌 2023-07-20 05:44 46阅读 0赞

**目录**

开发准备

创建项目

开发小程序helloword

小程序体验

数据绑定

事件监听

列表渲染

小程序配置

小程序双线程模型

小程序启动流程

注册App()时可以做什么

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

小程序组件

工具类

1.时间工具类

2.缓存工具类

--------------------

# **开发准备** #

1.官方文档地址：[https://developers.weixin.qq.com/miniprogram/dev/framework/][https_developers.weixin.qq.com_miniprogram_dev_framework]

可以大概了解一下

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

下载傻瓜式安装即可

3.注册地址：[https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh\_CN][https_mp.weixin.qq.com_cgi-bin_wx_token_lang_zh_CN]

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

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkxNTA4_size_16_color_FFFFFF_t_70][]

# 创建项目 #

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkxNTA4_size_16_color_FFFFFF_t_70 1][]

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

## 开发小程序helloword ##

我们创建完项目结构如下

![20200326181119553.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkxNTA4_size_16_color_FFFFFF_t_70 2][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkxNTA4_size_16_color_FFFFFF_t_70 3][]

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

![20200326184531602.png][]

![20200326184621973.png][]

![20200326184640494.png][]

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

![20200326185227126.png][]

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

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

![2020032618574317.png][]

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

![20200326191006737.png][]

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkxNTA4_size_16_color_FFFFFF_t_70 4][]

# 小程序体验 #

## 数据绑定 ##

// page/index/index.js
    //逻辑相关的代码
    Page({
      data:{
        name:'hellword'
      }
    })
     
     
    
    
    <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][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"
    }

# 小程序双线程模型 #

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkxNTA4_size_16_color_FFFFFF_t_70 5][]

# 小程序启动流程 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkxNTA4_size_16_color_FFFFFF_t_70 6][]

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

官网地址：[https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html][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][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_reference_api_Page.html]

# 小程序组件 #

文档地址[https://developers.weixin.qq.com/miniprogram/dev/component/][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

[https_developers.weixin.qq.com_miniprogram_dev_framework]: https://developers.weixin.qq.com/miniprogram/dev/framework/
[https_developers.weixin.qq.com_miniprogram_dev_devtools_download.html]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[https_mp.weixin.qq.com_cgi-bin_wx_token_lang_zh_CN]: https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkxNTA4_size_16_color_FFFFFF_t_70]: /images/20230528/c24679fb430d4a4cbb17f168547ee950.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkxNTA4_size_16_color_FFFFFF_t_70 1]: /images/20230528/575594a9134941c2a1d1ec9fcc9b8900.png
[20200326181119553.png]: /images/20230528/b9101b8759b64997a2995ec2c344cc04.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkxNTA4_size_16_color_FFFFFF_t_70 2]: /images/20230528/a8062620a62744b6b3df0f9b71265cbe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkxNTA4_size_16_color_FFFFFF_t_70 3]: /images/20230528/518f61b1e84743248efd0fca3df6ecc0.png
[20200326184531602.png]: /images/20230528/5dbb4edc582b4d758f40a30c62497f94.png
[20200326184621973.png]: /images/20230528/4f4a4e7cbecd477189f0f242b3d20857.png
[20200326184640494.png]: /images/20230528/b2d752127b844517a2cbf13fe6fcc53a.png
[20200326185227126.png]: /images/20230528/e4fdd16664c14d588ccb57ca0019721f.png
[2020032618574317.png]: /images/20230528/2d7d8385e3414e068ac2acf6f1bce9ad.png
[20200326191006737.png]: /images/20230528/8917f11e8dd2427093b2561fb2923509.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkxNTA4_size_16_color_FFFFFF_t_70 4]: /images/20230528/e03b663cc9f94b9a9d4f78c6ad0d58b1.png
[https_developers.weixin.qq.com_miniprogram_dev_reference_configuration_app.html]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkxNTA4_size_16_color_FFFFFF_t_70 5]: /images/20230528/e0bec0cb6dca4beda275b09a9c1fd4f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkxNTA4_size_16_color_FFFFFF_t_70 6]: /images/20230528/74ee8323ed45404b912a568c229eaafd.png
[https_developers.weixin.qq.com_miniprogram_dev_reference_api_App.html]: https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html
[https_developers.weixin.qq.com_miniprogram_dev_framework_app-service_scene.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/scene.html
[https_developers.weixin.qq.com_miniprogram_dev_reference_api_Page.html]: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
[https_developers.weixin.qq.com_miniprogram_dev_component]: https://developers.weixin.qq.com/miniprogram/dev/component/