【微信小程序】随手笔记

君问归期魏有期

已于 2023-06-01 00:50:06 修改

阅读量741

点赞数

文章标签：微信小程序小程序

于 2023-03-24 14:12:06 首次发布

本文链接：https://blog.csdn.net/LongLiveThePRC/article/details/129748828

版权

标题微信小程序开发笔记

文章目录

标题微信小程序开发笔记
一，引言
二，写小程序一定要看官方文档
三，文件目录
四，全局配置文件
五，公共配置
六，页面配置
七，组件概述
八，框架概述
九，使用HBuilder X开发小程序
十、Spring Boot整合微信小程序

一，引言

小程序就是一个前端，语法和前端几乎一样
即使是小白，看着开发文档也可以做出来一个小程序
但是小程序’包容性’不好，报错页面就无法被解析

二，写小程序一定要看官方文档

微信小程序官方文档

三，文件目录

每个页面都会有以下四种文件

-3.1 .js

对应的是js文件，用于处理用户的操作，如相应角色的点击、获取用户位置等

-3.2 .json

对应的是一些配置文件，是一种数据格式，在小程序中，它担任静态配置的角色。

-3.3 .wxml

对应的是html文件，是框架设计的一套标签语言，结合基础组件、事件系统、可以构建出页面的结构。他的主要作用是数据绑定、列表渲染、条件渲染，也可以作为模板供其他页面引用。

-3.4 .wxss

对应的是css文件，是一套样式语言，用于描述WXML的组件样式，并对WXML页面中的组件进行渲染。它决定了WXML的组件应该怎么显示。WXSS具有CSS大部分特性。与CSS相比，他又提供了一些扩展特性：尺寸单位、样式引入、内联样式、选择器、全局样式与局部样式。

四，全局配置文件

-4.1. app.js

用于配置小程序全局函数和data数据

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

-4.2. app.json

全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。

"pages" 中存放的是所有页面路径
"window" 中设置的是整体页面布局
"tabBar" 是下面三个栏目，在实际中不一定是三个
"style" 是版本号
"sitemapLocation" 存放的是sitemap配置文件路径

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/news/news",
    "pages/mine/mine",
    "pages/detail/detail",
    "template/list/list"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Junnix_Test",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#333",
    "selectedColor": "#ff0000",
    "backgroundColor": "#f5f5f5",
    "borderStyle": "black",
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icon/home.jpg",
        "selectedIconPath": "icon/_home.jpg"
      },
      {
        "pagePath": "pages/news/news",
        "text": "新闻",
        "iconPath": "icon/news.jpg",
        "selectedIconPath": "icon/_news.jpg"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "icon/my.jpg",
        "selectedIconPath": "icon/_my.jpg"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

-4.3. app.wxss

全局样式，作用域每一个页面。page.wxss文件中定义的样式是局部样式，只作用于对应的页面，并会覆盖app.wxss中相同的选择器

@import是导入外部wxss文件
.container 是对container类的一些文字渲染
view 是所有view组件的文字渲染

/**app.wxss**/
@import "common/common.wxss"

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

view{
  color: #333;
}

-4.4. project.config.json

工具上做的任何配置都会写入这个文件，重新安装工具或者换电脑工作时，只需要载入同一个项目的代码包，开发者工具就会自动读入当时开发项目时的个性化配置，其中包括编辑器颜色、代码上传时自动压缩等

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

-4.5. sitemap.json

用于配置小程序页面是否允许微信索引

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

五，公共配置

如果多个页面需要引用
一个图片
或者多个页面需要某个文字渲染
或者多个页面需要引用一个组件
那么我们就可以做一些全局性配置

-5.1. 公共配置文件

common文件夹

下面存放需要的配置即可
如：我这里存放了一个公共文字渲染文件

common.wxss

view{
  color: red;
}

在其他页面的.wxss文件中引入即可使用
app.wxss

@import "common/common.wxss"

-5.2. 公共照片文件

icon文件夹

下面存放了一些照片

-5.3. 页面模板

template文件夹

这里和正常页面设置一样
如，模板页面名字交list
那么这里就需要四个页面文件

list.js

// template/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

list.json

{
  "usingComponents": {}
}

list.wxml

{{img}} {{info}}两个括号包起来的数据表示占位符，需要数据绑定

<!--template/list/list.wxml-->
<!-- 定义模板 -->
<template name="list">
  <view class="list">
    <view class="left">{{img}}</view>
    <view class="right">{{info}}</view>
  </view>
</template>

list.wxss

.list：是对list类的渲染
.list .left：是对list类下left类的渲染
.list .right：是对list类下right类的渲染

/* template/list/list.wxss */
.list{
  display: flex;
  margin: 30rpx 0;
}
.list .left{
  width: 200rpx;
  height: 200rpx;
  background-color: skyblue;
}
.list .right{
  flex: 1;
  background-color: yellowgreen;
}

六，页面配置

-6.1. page.js

-6.2. page.json

-6.3. page.wxml

-6.4. page.wxss

七，组件概述

-7.1. 视图容器

-7.2. 基础内容

-7.3. 表单组件

-7.4. 导航

-7.5. 导航栏

八，框架概述

8.1. 小程序配置

8.2. 框架接口

8.3. WXML语法参考

8.4. WXS语法参考

九，使用HBuilder X开发小程序

十、Spring Boot整合微信小程序

10.1. 语法规范

开发工具设置

项目后端没有部署服务器：打开不校验域名

项目后端部署服务器：设置ip白名单以及服务器域名
设置地址

功能描述

发起 HTTPS 网络请求。使用前请注意阅读相关说明。

代码示例

wx.request({
  url: 'example.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

返回值

请求任务对象

data 参数说明

最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String 。转换规则如下：

对于 GET 方法的数据，会将数据转换成 query string（encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encode URIComponent(v)…）
对于 POST 方法且 header[‘content-type’] 为 application/json 的数据，会对数据进行 JSON 序列化
对于 POST 方法且 header[‘content-type’] 为 application/x-www-form-urlencoded 的数据，会将数据转换成 query string （encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)…）

10.2. 数据传输：普通数据类型

此处onLoad()只是一个例子，实际开发中会把相关操作写到绑定js事件中

page.js文件

  onLoad() {
    wx.request({
      url: 'http://localhost:8080/test/hello',
      method:"GET",
      success:(res)=>{
        console.log(res.data);
      }
    })
  },

Spring Boot 代码

@RestController
@RequestMapping("/test")
public class getAllTest {

//    这里是回显所有题目的逻辑
    @GetMapping("/hello")
    public String test(){
        return "hello world!";
    }

}

10.3. 数据传输：JSON数据类型

page.js文件

  onLoad() {
    wx.request({
      url: 'http://localhost:8080/test/showAll',
      method:"POST",
      header:{
         'content-type': 'application/x-www-form-urlencoded'
      },
      success:(res)=>{
        console.log(res.data);
      }
    })
  },

Spring Boot 代码

@RestController
@RequestMapping("/test")
public class getAllTest {
//	  数据源
    @Resource
    DTestService service;

//    这里是回显所有题目的逻辑
    @PostMapping("/showAll")
    public JSONObject getTestList(){
        JSONObject desc=new JSONObject();
        ArrayList<DTest> dTest = service.findDTest();
        for (int i = 0; i < dTest.size(); i++) {
            JSONObject index=new JSONObject();
            index.put("id",dTest.get(i).getId()+"");
            index.put("safe_type_id",dTest.get(i).getSafe_type_id()+"");
            index.put("ques_type",dTest.get(i).getQues_type()+"");
            index.put("ques_content",dTest.get(i).getQues_content());
            String[] split = dTest.get(i).getOptions().split("\\|");
            for (int j = 0; j < split.length; j++) {
                System.out.println("======="+split.length);
                index.put((char)(65+j)+"",split[j]+"");
            }
            System.out.println(Arrays.toString(split));
            String[] split1 = dTest.get(i).getAnswer().split("\\|");
            String test="";
            for (int j = 0; j < split1.length; j++) {
                test=test+split1[j];
            }
            index.put("answer",test);
            desc.put("dTest"+(i+1),index);
        }
        return desc;
    }

}

10.4. 数据传输：POST

page.js文件

wx.request({
  url: 'example.php', //仅为示例，并非真实的接口地址
  method:"POST",
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

Spring Boot 代码

@RestController
@RequestMapping("/test")
public class getAllTest {

//    这里是回显所有题目的逻辑
    @PostMapping("/hello")
    public String test(){
        return "hello world!";
    }

}

10.5. 数据传输：GET

page.js文件

wx.request({
  url: 'example.php', //仅为示例，并非真实的接口地址
  method:"GET",
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

Spring Boot 代码

@RestController
@RequestMapping("/test")
public class getAllTest {

//    这里是回显所有题目的逻辑
    @GetMapping("/hello")
    public String test(){
        return "hello world!";
    }

}

君问归期魏有期

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【微信小程序】随手笔记

微信小程序官方文档每个页面都会有以下四种文件对应的是js文件，用于处理用户的操作，如相应角色的点击、获取用户位置等对应的是一些配置文件，是一种数据格式，在小程序中，它担任静态配置的角色。对应的是html文件，是框架设计的一套标签语言，结合基础组件、事件系统、可以构建出页面的结构。他的主要作用是数据绑定、列表渲染、条件渲染，也可以作为模板供其他页面引用。对应的是css文件，是一套样式语言，用于描述WXML的组件样式，并对WXML页面中的组件进行渲染。它决定了WXML的组件应该怎么显示。WXSS具有CSS大部分
复制链接

扫一扫