微信小程序开发-第一个小程序（一）

最新推荐文章于 2023-01-13 09:26:59 发布

此鱼非闲鱼也

最新推荐文章于 2023-01-13 09:26:59 发布

阅读量1k

点赞数 3

分类专栏：微信小程序文章标签：小程序微信小程序开发工具小程序json配置文件

本文链接：https://blog.csdn.net/m0_45315697/article/details/106604903

版权

微信小程序专栏收录该内容

9 篇文章 2 订阅

订阅专栏

1、啥是小程序？
小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验
微信小程序是一种不需要下载也不需要安装就可以使用的应用程序

它需要所有的开发者都能做到：

快速的加载
更强大的能力
原生的体验
易用且安全的微信数据开放
高效和简单的开发

2、开发环境
小程序的主要开发语言是 JavaScrip
开发网页时，只需要使用到浏览器，搭配编译器或一些辅助工具即可。
小程序开发，需要申请小程序帐号、登陆微信公众平台、安装小程序开发者工具、配置项目等过程才能完成。

3、新建小程序
3-1 扫码进入开发者工具
已注册登陆开发者账号，安装开发者工具（官网可自行下载）后，
每次打开微信开发者工具时，都需要先扫码进入

3-2 新建/选择小程序
扫码后，出现如下窗口：
如果之前已建有小程序项目，这里会有记录，如果需要修改或继续开发，选择相应的小程序进入即可；
扫码进入微信开发者工具后的窗口
如果第一次打开，或者需要新建小程序项目时，点击窗口内的 “+” 加号，会出现一个新建小程序项目的窗口，如下：

小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID ，
如果没有AppID,而你的小程序作为测试使用，可以直接使用推荐的测试号即可
如果你要上线发布小程序，就需要购买自己的域名

3-3 小程序中的尺寸单位
微信小程序中css的尺寸单位是rpx，rpx可以根据屏幕宽度进行自适应。
规定屏幕宽为750rpx
官方建议以iPhone6 为标准，屏幕宽度为375px，共有750个物理像素，即750rpx = 375px = 750物理像素，

微信小程序也支持尺寸单位rem，
rem和rpx的换算关系：
rem: 规定屏幕宽度为20rem；
1rem = (750/20)rpx
1rpx = 0.5px = 1物理像素

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.userexplain {
  margin-top: 200rpx;
}

4、第一个小程序
先来看看第一个简单的小程序，就是下面这个熊样子：

4-1先来看看小程序的结构
小程序无论大小，文件如何变来变去，无非就是下面四种文件，先看看它们分别有啥作用

.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件, 项目入口文件app.js

4-2 json配置文件
在小程序中，json配置文件存放的静态配置的信息。
大眼一扫，不难发现项目的根目录下有一个 app.json 和 project.config.json文件，
在 pages目录的子目录下都有一个.json文件，存放对应页面的配置信息。

app.json 是当前小程序的全局配置，包括小程序的所有页面路径、界面显示、网络超时时间、底部 tab 等等。
app.json文件中配置信息
pages —— 用于描述当前小程序所有页面路径（必填项），这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

"pages": [
    "pages/index/index",//首页
    "pages/user/user",//用户页
    "pages/logs/logs"//日志页
  ]

window —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等等。
想看其他配置，请移步官方大厅小程序配置app.json

"window": {
    "backgroundTextStyle": "light",//下拉背景样式，loading图的样式，dark或light
    "navigationBarBackgroundColor": "#ABE7F4",//导航栏背景颜色
    "navigationBarTitleText": "测试小程序",//导航栏标题名字
    "navigationBarTextStyle": "black" //导航栏标题颜色，black或white
  }

tabBar——小程序底部导航栏及tab切换时对应的页面

"tabBar": {
    //tab列表，最少两个，最多五个，里面存放对象，每个对象接收四个参数，如下
    "list": [
      {
        "pagePath": "pages/index/index",//跳转页面
        "text": "首页",//标题名字
        "iconPath":"/ico/home.png",//图片路径
        "selectedIconPath":"/ico/home-active.png"//选中点击后的图片路径
      },
      {
        "pagePath": "pages/user/user",
        "text": "用户",
        "iconPath":"/ico/user.png",
        "selectedIconPath":"/ico/user-active.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath":"/ico/log.png",
        "selectedIconPath":"/ico/log-active.png"
      }
    ],
    "backgroundColor": "#C8F7D3" //底部导航栏背景色
  }

sitemapLocation 来指明 sitemap.json 的位置

"sitemapLocation": "sitemap.json"

sitemap.json
小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。
默认情况下，所有页面都会被索引。

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

配置 path/to/page 页面不被索引，其余页面允许被索引

{
  "rules":[{
    "action": "disallow",
    "page": "path/to/page"
  }]
}

project.config.json
小程序开发者工具在每个项目的根目录都会生成一个 project.config.json文件，
在工具上做的任何配置都会写入到这个文件，当重新安装工具或者换电脑工作时，只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

{
	"description": "项目配置文件",
	"packOptions": {
		"ignore": []
	},
	"setting": {
		"urlCheck": true,
		"es6": true,
		"enhance": false,
		"postcss": true,
		"minified": true,
		"newFeature": true,
		"coverView": true,
		"nodeModules": false,
		"autoAudits": false,
		"showShadowRootInWxmlPanel": true,
		"scopeDataCheck": false,
		"checkInvalidKey": true,
		"checkSiteMap": true,
		"uploadWithSourceMap": true,
		"babelSetting": {
			"ignore": [],
			"disablePlugins": [],
			"outputPath": ""
		}
	},
	"compileType": "miniprogram",
	"libVersion": "2.0.4",
	"appid": "wx933fdd3711986c86",
	"projectname": "ExeciseNotebook",
	"debugOptions": {
		"hidedInDevtools": []
	},
	"isGameTourist": false,
	"simulatorType": "wechat",
	"simulatorPluginLibVersion": {},
	"condition": {
		"search": {
			"current": -1,
			"list": []
		},
		"conversation": {
			"current": -1,
			"list": []
		},
		"game": {
			"currentL": -1,
			"list": []
		},
		"miniprogram": {
			"current": -1,
			"list": []
		}
	}
}

5-1 框架
整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。
小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，
并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

5-2 数据绑定
框架的核心是一个响应的数据绑定系统，可以让数据与视图非常简单地保持同步。
当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

在一个组件的属性上添加bindtap属性并赋予一个值(一个函数名)
当点击该组件时, 会触发相应的函数执行（通过bindtap绑定点击事件）

pages/index/index.wxml

<view class="container">
  <view class="userinfo">
     <!--wx:if  wx:else 条件渲染-->
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <!-- 头像 -->
      <!--绑定点击事件-->
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover">
      </image>
      <!-- 昵称 -->
      <text class="userinfo-nickname">
         <!--数据绑定-->
        {{userInfo.nickName}}
      </text>
    </block>
  </view>
  <view class="userexplain">
    <text class="user-motto">{{explain}}</text>
  </view>
</view>

pages/index/index.js

//获取应用实例
const app = getApp();

Page({
  data: {
    explain:'hello，this is my first file',
    userInfo: {},
    hasUserInfo: false,
    //判断小程序的API，回调，参数，组件等是否在当前版本可用。
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //点击事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

pages/logs/logs.wxml

<view class="container log-list">
  <!--列表渲染-->
  <block wx:for="{{logs}}" wx:for-item="log">
    <text class="log-item">
      {{index + 1}}. {{log}}
    </text>
  </block>
</view>

pages/logs/logs.js

const util = require('../../utils/util.js');

Page({
  /*页面的初始数据*/
  data: {
    logs:[]
  },
  /*生命周期函数--监听页面加载*/
  onLoad: function (options) {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(log => {
        return util.formatTime(new Date(log))
      })
    })
  },

  /*生命周期函数--监听页面初次渲染完成*/
  onReady: function () {

  },

  /**生命周期函数--监听页面显示*/
  onShow: function () {

  },

  /**生命周期函数--监听页面隐藏*/
  onHide: function () {

  },

  /*生命周期函数--监听页面卸载*/
  onUnload: function () {

  },

  /*页面相关事件处理函数--监听用户下拉动作*/
  onPullDownRefresh: function () {

  },

  /*页面上拉触底事件的处理函数*/
  onReachBottom: function () {

  },

  /*用户点击右上角分享*/
  onShareAppMessage: function () {

  }
})

utils/util.js

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('/') + ' ' + [hour, minute, second].map(formatNumber).join(':');
}

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

module.exports = {
  formatTime: formatTime
}

此鱼非闲鱼也

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
微信小程序开发-第一个小程序（一）

1、啥是小程序？小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验它需要所有的开发者都能做到：快速的加载更强大的能力原生的体验易用且安全的微信数据开放高效和简单的开发2、开发环境小程序的主要开发语言是 JavaScrip开发网页时，只需要使用到浏览器，搭配编译器或一些辅助工具即可。小程序开发，需要申请小程序帐号、登陆微信公众平台、安装小程序开发者工具、配置项目等过程才能完成。3、新建小程序3-1 扫码进入开发者工具已注册登陆开发
复制链接

扫一扫