18.9.25微信小程序

最新推荐文章于 2025-07-11 17:03:11 发布

matilian1

最新推荐文章于 2025-07-11 17:03:11 发布

阅读量468

点赞数

CC 4.0 BY-SA版权

分类专栏：微信

本文链接：https://blog.youkuaiyun.com/wangqingqing_/article/details/82842225

微信专栏收录该内容

0 篇文章

订阅专栏

一.根据官网,注册设置完成 (https://mp.weixin.qq.com/cgi-bin/wx)

二.第一个微信小程序(https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html)

1.JSON配置:

a, app.json是全局配置,包括小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等.配置内容如下:

{
  "cloud": true,
  "pages": [
    "pages/index/index",
    "pages/userConsole/userConsole",
    "pages/storageConsole/storageConsole",
    "pages/databaseGuide/databaseGuide",
    "pages/addFunction/addFunction",
    "pages/deployFunctions/deployFunctions",
    "pages/chooseLib/chooseLib"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "云开发 QuickStart",
    "navigationBarTextStyle": "black"
  }
}

pages字段:用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录

window字段:定义小程序所有页面的顶部背景颜色，文字颜色定义等

其他配置参考(https://developers.weixin.qq.com/miniprogram/dev/framework/config.html)

b,工具配置project.config.json

通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。

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

c,页面配置page.json

这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。(https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E9%A1%B5%E9%9D%A2%E9%85%8D%E7%BD%AE)

2.WXML模板

WXML 充当的就是类似 HTML 的角色。打开 pages/index/index.wxml，你会看到以下的内容:

<!--index.wxml-->
<view class="container">

  <!-- 用户 openid -->
  <view class="userinfo">
    <button 
      open-type="getUserInfo" 
      bindgetuserinfo="onGetUserInfo"
      class="userinfo-avatar"
      style="background-image: url({{avatarUrl}})"
    ></button>
    <view>
      <button class="userinfo-nickname" bindtap="onGetOpenid">点击获取 openid</button>
    </view>
  </view>


  <!-- 上传图片 -->
  <view class="uploader">
    <view class="uploader-text" bindtap="doUpload">
      <text>上传图片</text>
    </view>
    <view class="uploader-container" wx:if="{{imgUrl}}">
      <image class="uploader-image" src="{{imgUrl}}" mode="aspectFit" bindtap="previewImg"></image>
    </view>
  </view>


  <!-- 操作数据库 -->
  <view class="uploader">
    <navigator url="../databaseGuide/databaseGuide" open-type="navigate" class="uploader-text">
      <text>前端操作数据库</text>
    </navigator>
  </view>

  <!-- 新建云函数 -->
  <view class="uploader">
    <navigator url="../addFunction/addFunction" open-type="navigate" class="uploader-text">
      <text>快速新建云函数</text>
    </navigator>
  </view>

</view>

与HTML区别:

a,标签名字不太一样,html中的是div p span等.WXML是view button text等,这些标签就是小程序给开发者包装好的基本能力,还提供了地图视频音频等组件(https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/framework.html)

b,多了一些wx:if 这样的属性以及{{}}这样的表达式

在一般开发流程中,是通过js操作dom,响应用户行为,例如,点击某个按钮,js会记录一些状态到js变量里面,同时通过domAPI操控dom属性或者行为,当项目过大,代码中会有很多界面交互逻辑和程序的各种状态变量,因此就有了MVVM的开发模式(React Vue),把渲染和逻辑分离,即不让js操控dom,js只需要管理状态即可,然后再通过一种模板语法来描述状态和界面结构的关系即可

小程序的框架也是用到了这个思路,如果显示一个Hello World,

WXML写法: <text>{{msg}}</text> JS只需要管理状态即可: this.setData({msg:"Hello World"}) 通过{{}}的语法把一个变量绑定到界面上,我们称为数据绑定,此外还需要if/else,for等控制能力,在小程序里面,这些控制能力都用wx:开头的属性来表达(https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/index.html)

3.WXSS样式

wxss具有css大部分特性.小程序在wxss中扩充修改.

a,新增了尺寸单位.在写css样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比,采用一些技巧来换算一些像素单位.wxss在底层支持新的尺寸单位rpx.开发者可以免去换算的烦恼,只要交给小程序底层换算即可,由于换算结果采用的浮点数运算,所以运算结果会和预期结果有一点点偏差.

b,提供了全局的样式和局部样式.和前边app.json,page.json的概念相同,你可以写一个app.wxss作为全局样式,会作用于当前小程序的所有页面,局部页面样式page.wxss仅对当前页面生效

c,此外wxss仅支持部分css选择器(https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html)

微信小程序同时也支持rem尺寸单位,rem规定屏幕的宽度为20rem,所以1rem=(750/20)rpx=37.5rpx

4.JS交互逻辑

js脚本文件处理用户的操作

点击按钮,界面上msg显示成"Hello World",于是我们在button上声明一个属性:bindtap,在js文件中声明clickMe方法来响应点击操作:

Page({

clickMe:function(){

this.setData({msg:"Hello World"})

}

})

其他事件(https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html)

此外你还可以在 JS 中调用小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等。在前边的 QuickStart 例子中，在 pages/index/index.js 就调用了 wx.getUserInfo 获取微信用户的头像和昵称，最后通过 setData 把获取到的信息显示到界面上。更多 API (https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/api.html)。

5.小程序的启动

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径:

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

这个配置说明在该项目定义两个页面，分别位于 pages/index/index 和 pages/logs/logs。而写在 pages 字段的第一个页面就是这个小程序的首页。

小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行:

App({
  onLaunch: function () {
    // 小程序启动之后 触发
  }
})

整个小程序只有一个 App 实例，是全部页面共享的,更多事件回调(https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/framework.html#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9A%84%E5%90%AF%E5%8A%A8)