微信小程序（二）

最新推荐文章于 2022-08-31 07:29:57 发布

leehaming

最新推荐文章于 2022-08-31 07:29:57 发布

阅读量840

点赞数

分类专栏： web学习

本文链接：https://blog.csdn.net/lee_ham/article/details/80367330

版权

web学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

浏览过的干货-供学习参考

0.官方文档

https://developers.weixin.qq.com/miniprogram/dev/api/
https://developers.weixin.qq.com/miniprogram/dev/component/
https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
https://www.w3cschool.cn/weixinapp/

1.获取地理位置

下边两篇文章分别提供了两种方式；本人采用的是第一种，流程摘录如下。第二种的思路是先获取了当前位置的经纬度，然后获取位置信息。
微信小程序JavaScript SDK
微信小程序–获取地理位置名称
1. 申请开发者密钥（key）：申请密钥
2. 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.0
3. 安全域名设置，在“设置” -> “开发设置”中设置request合法域名，添加https://apis.map.qq.com
4. 小程序示例
// 引入SDK核心类
var QQMapWX = require(‘../../libs/qqmap-wx-jssdk.js’);
var qqmapsdk;
Page({
onLoad: function () {
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: ‘申请的key’
});
},
onShow: function () {
// 调用接口
qqmapsdk.search({
keyword: ‘酒店’,
success: function (res) {
console.log(res);
},
fail: function (res) {
console.log(res);
},
complete: function (res) {
console.log(res);
}
});
})

细节

下载的SDK核心类不一样，其中包含的函数有区别；我下载的sdk函数中使用ercerseGeocoder不可用；另外在使用qqmapsdk.search时，设定“keyword”为“学校”但是结果找不到学校时，好像是会报错
这里申请的密钥不是微信小程序中生成的密钥，我之前以为是微信小程序中的生成密钥，但是输入进去之后显示无效的key。应当是申请密钥向腾讯地图申请的权限密钥。

2.条件渲染 wx:if

微信小程序条件渲染 wx:if
不得不说，小程序中提供的这个功能很人性化。
小程序中{{}}里边可以使用变量，简单的逻辑表达式/运算符连接的表达式

细节

在小程序中调用变量使用{{}},这里要注意wx:if的{{}}中存放的是一个condition；可以直接得到true/false。
在本程序中使用的情形：如果信息已经绑定则显示“绑定”按钮；否则显示“重新绑定”按钮。于是使用全局变量hasUserBindInfo来判断

3.列表渲染 wx:for

wx:for的使用
 微信小程序列表渲染 wx:for

{{index}} {{item.name}}

同样人性化的功能

细节

其中item时已经封装好的，在wx:for之后可以直接使用，不需要指定，表示该列表中的某一项；index表示索引；
wx:for是循环数组，wx:for-item即给列表赋别名，wx:for-index指定数组当前下标的变量名
还可以找到数组长度

4.事件

https://www.w3cschool.cn/weixinapp/weixinapp-event.html

5.wx.request发送与服务端接受(get post)

v微信小程序开发之网络请求(POST请求)
HTTP 方法：GET 对比 POST

细节

如果不是通过前端向后台传送参数的话，可以直接利用URL向后台请求数据；直接在URL栏中输入地址
URL中带参数：/test/demo_form.asp?name1=value1&name2=value2
GET - 从指定的资源请求数据；POST - 向指定的资源提交要被处理的数据
GET编码：application/x-www-form-urlencoded；POST编码：application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
列表格

6.编码

web项目前端与后端联动中文字符编码问题
 小程序请求乱码如何解决
 服务器接收小程序wx.request参数乱码

细节

GET编码：application/x-www-form-urlencoded；POST编码：application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
其中第1篇中主要是Java web中的编码问题；讲到过滤器的知识。暂时还没有学习。
在小程序中，本人在实现post时遇到了编码问题，在前端输入汉字，数据库中乱码。首先使用了Util.json2Form(忘记了这个的作用是为了传参为数组还是编码问题了….)；并且在编码中设置为utf-8。其中的Util.json2Form网上有写好的。
data: Util.json2Form({
userNumber: that.data.userNumber,
userName: that.data.userName,
teacherName: that.data.userTeacher[0]
}),
method: ‘POST’,
header: {
“Content-Type”: ‘application/x-www-form-urlencoded;charset=utf-8’,
},
还有一个问题没有解决：存储到数据库中的汉字，使用get方法获取内容时，出现乱码，一直没有解决。并且问题3中虽然在数据库中存入了汉字，但是整个小程序中的汉字姓名都是基于输入获取的，并没有从数据库读取。
总的来说，解决了向数据库写中文乱码的问题；未解决从数据库中读中文显示乱码的问题

7.小程序的赋值与取值

微信小程序—-关于变量对象data 和前端wxml取后台js变量值
 微信小程序–data的赋值与取值

细节

一个页面中的变量在js文件的data{}中定义；js和wxml文件都可以读取
js取值时：that.data.var-name，这里的that：var that=this，表示当前页面; wxml取值时：直接调用data中的var-name就可以了，使用{{var-name}}
在为data中的数据赋值时，一定要注意that.setdata(),不能直接使用赋值号=，无效。在that.setData()函数中直接使用var-name即可
总结：js非setData函数体调用变量：that.data.var-name；js中setData函数体调用变量：var-name；wxml调用变量：{{var-name}}

8.富文本转化插件wxParse

wxParse-微信小程序富文本解析自定义组件
 在微信小程序中使用富文本转化插件wxParse
在实现用户发帖功能时，考虑加上图片和超长的文本，所以学习了一下网上如何在小程序中显示富文本以及如何显示图片

引入模块

//在使用的View中引入WxParse模块
var WxParse = require(‘../../wxParse/wxParse.js’);
//在使用的Wxss中引入WxParse.css,可以在app.wxss
@import “/wxParse/wxParse.wxss”;

数据绑定

var article = ‘

我是HTML代码

‘;
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
var that = this;
WxParse.wxParse(‘article’, ‘html’, article, that, 5);

模版引用

// 引入模板

//这里data中article为bindName

将富文本文件放在.js文件中

// 引入内置HTML对象文件
const company = require(“./company.js”);

细节

当时学习的时候可以成功的将一个富文本显示在小程序中。但是我的目的是在项目中存入大量的富文本文件，其中文件内容是html格式的内容。这就需要a.循环引入内置HTML对象的文件 b.循环创建绑定的数据名 c.循环调用WxParse d.循环引用模板。其中后边三个都可以解决了，只需要字符串拼接就可以了。关于第一个如何循环引入内置html文件，当时卡在那里了。。但是肯定是有解决办法的。。。。
虽然没有成功运用到工程中去，过程中却也学会了如何将图片存储到数据库。页面显示的时候可以使用图片在本工程的相对路径，然后将路径信息存入到数据库中，每次需要显示时，先从数据库中读取图片的URI,然后从项目中取出显示即可

9.用户输入内容自动换行

怎么实现input 自动换行～谢谢各位高手帮忙！
与的使用

10.小程序页面跳转

微信小程序详解——页面之间的跳转方式【路由】和参数传递
 微信小程序(2) 按钮点击跳转页面
1.wx.navigateTo(OBJECT)；
2.wx.redirectTo(OBJECT)；
3.wx.switchTab(OBJECT)；
4.wx.navigateBack(OBJECT)
5.使用实现对应的跳转功能；

细节

实现点击“发布帖子”进入帖子编辑页面：最开始使用的时redirectTo，但是由于redirectTo和switchTab都是先清除栈中原来的页面，然后目标页面进栈，使用这两种跳转方式，都不能通过系统的返回键回到上一个页面，而是直接退出小程序；因此最后还是选用了navigateTo()

11.页面生命周期

Page页面生命周期——微信小程序
 https://blog.csdn.net/haijing1995/article/details/68961230
onLoad:function (options) {
//页面初始化
console.log(‘index Load’)
},
onShow:function () {
//页面显示
console.log(‘index Show’)
},
onReady:function () {
//页面渲染完成
console.log(‘index Ready’)
},
onHide:function () {
//页面隐藏
console.log(‘index Hide’)
},
onUnload:function () {
//页面关闭
console.log(‘index Unload’)
}

细节

实现过程中需要每次进入该页面时都会刷新，比如我发布帖子之后，再进入查看帖子页面，可以更新内容。这里就涉及到onLoad()和onShow()的区别，前者时第一次加载时显示，后者每次显示该页面是都会执行。

12.Toast框和icon

微信小程序之toast等弹框提示
 微信小程序—-icon组件
 微信小程序—-引入外部字体库iconfont的图标
wx.showToast({
title: ‘成功’,
icon: ‘succes’,
duration: 1000,
mask:true
})

细节

其中的showToast中的icon只支持success和loading
{{address}}

13.下拉菜单

微信小程序下拉菜单
 微信小程序仿闲鱼『下拉菜单』

14.数组操作

微信小程序之数组操作：push与concat的区别

细节

当需要对小程序js文件datad中的数组操作时用到了push
var obj1 = {};
obj1.title = “userName”;
obj1.value = that.data.userName;
var obj2 = {};
obj2.title = “userNumber”;
obj2.value = that.data.userNumber;
var obj3 = {};
obj3.title = “userTeacher”;
obj3.value = that.data.userTeacher[0];
//console.log(a);
let userBindInfo = that.data.userBindInfo;
userBindInfo.push(obj1);
userBindInfo.push(obj2);
userBindInfo.push(obj3);

15.setData

setData({})，您肯定不知道的！（框架细节五）
微信小程序 setData 的坑
Page({
data: {
array: [{text: ‘init data’}],
},
changeItemInArray: function() {
this.setData({
‘array[0].text’:’changed data’
})
}
})

16.使用连接mysql的jdbc驱动最新版引发的问题

细节

使用连接mysql的jdbc驱动时遇到问题：
Caused by: java.sql.SQLException: The server time zone value ‘�й��׼ʱ��’ is unrecognized or represents more than one time zone. You must configure either the server or JDBC driver (via the serverTimezone configuration property) to use a more specifc time zone value if you want to utilize time zone support.
解决：
jdbc:mysql://localhost/db?useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC

17.完整java开发中JDBC连接数据库代码和步骤

Connecting to MySQL Using the JDBC DriverManager Interface
http://www.cnblogs.com/hongten/archive/2011/03/29/1998311.html

细节

driver = “com.mysql.jdbc.Driver”;
dburl = “jdbc:mysql://localhost/wechat?useSSL=false&useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC”;
user = “root”;
password = “asdfghjkl456”;
public Connection makeConnection(){
try {
System.out.println(“connection start!!!”);
Class.forName(driver);
conn = DriverManager.getConnection(dburl, user, password);
System.out.println(“connection success!!!”);
} catch (Exception e) {
System.out.println(“connection failed!!!”);
e.printStackTrace();
}
return conn;
}
1. 加载MySQL驱动类
  try{
  //加载MySql的驱动类
  Class.forName(“com.mysql.jdbc.Driver”) ;
  }catch(ClassNotFoundException e){
  System.out.println(“找不到驱动程序类，加载驱动失败！”);
  e.printStackTrace() ;
  }
2. 提供JDBC连接的URL
driver = “com.mysql.jdbc.Driver”;
dburl = “jdbc:mysql://localhost/wechat?useSSL=false&useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC”;
user = “root”;
password = “asdfghjkl456”;
1. 创建数据库的连接
  conn = DriverManager.getConnection(dburl, user, password);
2. 创建一个Statement
  要执行SQL语句，必须获得java.sql.Statement实例，Statement实例分为以下3种类型：
执行静态SQL语句。通常通过Statement实例实现。
执行动态SQL语句。通常通过PreparedStatement实例实现。
执行数据库存储过程。通常通过CallableStatement实例实现。
Statement st1 = conn.createStatement();
1. 执行SQL语句
  Statement接口提供了三种执行SQL语句的方法：executeQuery 、executeUpdate和execute
ResultSet executeQuery(String sqlString)：执行查询数据库的SQL语句，返回一个结果集（ResultSet）对象。
int executeUpdate(String sqlString)：用于执行INSERT、UPDATE或DELETE语句以及SQL DDL语句，如：CREATE TABLE和DROP TABLE等
execute(sqlString):用于执行返回多个结果集、多个更新计数或二者组合的语句。
String sql1 = “select * from post where postId=(select max(postId) from post)”;
Statement st1 = conn.createStatement();
ResultSet rt1 = st1.executeQuery(sql1);
1. 处理结果
  ResultSet包含符合SQL语句中条件的所有行，并且它通过一套get方法提供了对这些行中数据的访问。
  while (rt.next()){
  Post post = new Post();
  post.setPostId(rt.getInt(“postId”));
  post.setUserNumber(rt.getString(“userNumber”));
  post.setPostTitle(rt.getString(“postTitle”));
  post.setPostContent(rt.getString(“postContent”));
  post.setPostRemark(rt.getString(“postRemark”));
  System.out.println(“post:”+post.toString());
  }

18.后台搭建

如何给自己的Android应用快速搭建测试后台？

19.图片或文件在数据库的存储

关于图片或者文件在数据库的存储方式归纳

leehaming

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
微信小程序（二）

浏览过的干货-供学习参考0.官方文档https://developers.weixin.qq.com/miniprogram/dev/api/ https://developers.weixin.qq.com/miniprogram/dev/component/ https://developers.weixin.qq.com/miniprogram/dev/devtools/de...
复制链接

扫一扫

专栏目录