标题微信小程序开发笔记

一，引言

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

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

微信小程序官方文档

三，文件目录

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

-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 {//    数据源@ResourceDTestService 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!";}}

【微信小程序】随手笔记相关推荐

1. 微信小程序开发-笔记

   一.开发文件结构 1.根目录下有三个文件:app.js,app.json和app.wxss.一个小程序项目必须有的三个描述App的文件.这三个文件是应用程序级别的文件.这3个文件的意义: 表1.1  ...

2. 一个C#程序员学习微信小程序的笔记

   一个C#程序员学习微信小程序的笔记 客户端打开小程序的时候,就将代码包下载到本地进行解析,首先找到了根目录的 app.json ,知道了小程序的所有页面. 在这个Index页面就是我们的首页,客户端在 ...

3. 小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发

   一.常用组件 在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...

4. 云开发（微信-小程序）笔记（十四）---- 收藏，点赞（上）

   云开发(微信-小程序)笔记(十三)---- 注册登陆 1.简介 点赞,收藏等都是程序的最简单的功能,在现实的应用中也很常见.这里我就来给大家介绍一下小程序的这个功能. 图标下载地址 先去网站上http ...

5. 微信小程序开发笔记，你收藏了吗？

   ** 微信小程序开发笔记,你收藏了吗? ** 最近在开发微信小程序,把自己在项目中经常遇到的知识点记录下来,以便下次开发的时候查看. 开发小程序开发工具推荐vscode写代码,微信开发工具用于查看效果 ...

6. 微信小程序开发笔记 进阶篇④——getPhoneNumber 获取用户手机号码（小程序云）

   文章目录 一.前言 二.前端代码wxml 三.前端代码js 四.云函数 五.程序流程 一.前言 微信小程序开发笔记--导读 大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机号码. 但是,因 ...

7. 微信小程序开发笔记 进阶篇⑤——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之前）

   文章目录 一.前言 二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程 六.参考 一.前言 微信小程序开发笔记--导读 大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...

8. 微信小程序学习笔记（1）

   微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构 当开发者新建一个工程时,项目文件包 ...

9. 微信小程序开发笔记二（WXSS和CSS样式美化）

   微信小程序开发笔记二(WXSS和CSS样式美化) 一.CSS基本知识 1.Class选择器的定义 2.ID选择器的定义 3.ID选择器和class选择器的区别 4.CSS中设置颜色 5.CSS中的文本 ...

10. 微信小程序开发笔记——wsdchong

    微信小程序开发笔记 一.小程序简介 小程序起源于微信的webview:此类API最初是提供给腾讯内部一些业务使用,很多外部开发者发现后,照葫芦画瓢,逐渐成为微信中网页的事实标准.2015年初,微信发布 ...

最新文章

1. 点击头像单独把图片拉取出来.然后再次点击回到初始效果
2. simulink m序列仿真（待验证）
3. android最大json,Android：解析大型JSON文件
4. 【木头小开发】-iOS小小里程总结一二
5. mysql pdo 读取字段名_PHP使用PDO从mysql读取大量数据处理详解
6. 怎么将.POF文件下载到开发板[转载]
7. 关于Validform
8. 对话海星区块创始团队，打造区块链媒体明日之星
9. 计算机硬件报警声音,电脑开机报警声音大全详解及处理
10. php mysql 分页查询_PHP+MySQL分页查询实现
11. ElasticSearch进阶（五）MetricBeat的简单使用
12. 2007年考研时间安排表
13. Linux系统分区管理与swap分区
14. Java实现表格打印翻页_简单又实用的小文章来了----表格分页打印的那些小事（2）...
15. LSR and DLSR
16. 2022新版彩虹易支付系统源码/运营版/支持当面付/通道轮询/16支付插件/免签约支付系统
17. ThinkPad E460c安装触摸板驱动未找到未发现synaptics设备
18. qq文件怎么传到百度云_如何将手机百度网盘中的文件发送给微信或qq好友 看完就明白了...
19. 原生js实现跑马灯效果，鼠标放下可以停止跑动
20. Android Audio - 支持多应用同时录音_Android9.0修改方法

热门文章

1. h5页面唤起微信小程序（vue）
2. golang 撤回_layim的websocket消息撤回功能实现
3. 程序丸子的校招个人经验——八股文篇
4. 用python输出一个爱心
5. python turtle库完美实现小猪佩奇教程
6. 前端如何正确配合后端解析markdown语法
7. 基于微信小程序的音乐播放器的设计与实现（附带毕业设计报告和源码程序）
8. 第08讲：Vue+axios
9. canvas--标尺
10. 电脑不能进入睡眠模式