写个小程序练练手，花了我将近一周时间，前端花了我挺长时间的，后台超简单，他一个页面可能包含这四个部分，分别是wxml（相当于HTML）、wxss（相当于CSS）、js和json（设定常量，我用的比较少），这次我要做的是一个微信名片分享的小程序，主要实现了把自己的名片分享给别人这一个功能。
前期准备
https
挂载微信小程序的后台需要https支持，所以还是准备好相关证书吧，好在阿里云提供的免费的证书（前提是你的服务器在阿里云）购买地址
申请的时候需要绑定一个专门用于此小程序的接口域名
域名绑定
在微信公众平台 | 小程序管理界面，选择->设置->开发设置进行服务器域名的设置，域名只能是https的
开始开发
可以将微信自己的小Demo下载下来，先看看能不能运行，他的下载地址是:https://mp.weixin.qq.com/debug/wxadoc/dev/
我也是主要依照这个文档来开发的
微信小程序的项目结构如下
pages
-----| 页面1
-----|--------|页面1的js
-----|--------|页面1的wxml
-----|--------|页面1的wxss
utils
-----|工具类.js
你也可以自己创建一个和pages同级的images文件夹来存放图片，图片不能直接复制进开发工具，而要自己才资源管理器中将图片复制到本地项目目录中，再刷新开发工具，这是我的文件目录
wx.login获取微信用户信息
只要我们的小程序有用户实体一般都会和他的微信账号相关信息关联起来，获取微信账号信息可以通过此接口。
小程序运行的时候会先访问app页面，所以我在app.js文件中添加了微信登录的相关代码——wx.login，你可以在onLaunch或者想Demo中getUserInfo使用这个wx.login他就会唤起微信的授权，用户点击了同意后可以获取到一个code，把这个code给后端就可以获取到这个用户的一些信息了，如果后台需要存储用户昵称或者头像的话最好一并把最新的这两个参数交给后台，前端的js部分代码如下
wx.login({
success: function (ress) {
wx.getUserInfo({
success: function (res) {
console.log("登录成功");
console.log(res.userInfo);
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo);
//获取token
console.log("开始获取token");
wx.request({
url: that.globalData.url + 'user/login',
data: {
code: ress.code,
nickname: res.userInfo.nickName,
headImg: res.userInfo.avatarUrl,
},
success: function (res) {
console.log("获取成功token");
console.log(res);
var code = res.data.code;
var token = res.data.data;
that.globalData.token = token;
wx.setStorageSync("token", token);
后台的代码如下
//APPID、APP_SECRET在微信公众平台-小程序中可以找到，code是刚刚前端给我们的
String url = "https://api.weixin.qq.com/sns/jscode2session?appid="+APPID+"&secret="+SECRET+"&js_code="+code+"&grant_type=authorization_code";
//发送请求
String result = AppTool.GET(url);
之后我们对请求结果进行一些处理
JSONObject resJson = JSONObject.fromObject(result);
String session_key = resJson.getString("session_key");
String openid = resJson.getString("openid");
//通过openid判断是否为新用户
User user = userService.findByOpenid(openid);
if(user != null) {
//老用户
} else {
//新用户
}
老用户我们就判断一下他的头像和昵称有没有变化，有变化就更新，新用户就创建用户。之后把token给前端，让前端进一步操作。
wx.request发起网络请求
通过它我们可以访问到后台的接口，默认他不需要写fail回调的，我以为实相jquery那样用error:function(e)，看了文档之后发现应该叫做fail。在本小程序中，用户登录后还需要对用户是否有名片进行一个判断，如果有就跳转到名片页，如果没有跳转到创建名片页，前端的js代码如下。
//判断用户是否有名片
wx.request({
url: that.globalData.url + 'card/find',
data: {
index: 1,
size: 5,
token: token,
},
success: function (res) {
console.log("判断用户是否有名片");
console.log(res);
var code = res.data.code;
if (code == 0) {
//成功访问
var cards = res.data.data;
console.log("cards");
console.log(cards);
if (cards.count > 0) {
//获取卡信息存入全局变量中
that.globalData.card.company = cards.users[0].company;
that.globalData.card.duty = cards.users[0].duty;
that.globalData.card.email = cards.users[0].email;
that.globalData.card.id = cards.users[0].id;
that.globalData.card.intro = cards.users[0].intro;
that.globalData.card.phone = cards.users[0].phone;
that.globalData.card.popNum = cards.users[0].popNum;
that.globalData.card.likeNum = cards.users[0].likeNum;
that.globalData.card.collNum = cards.users[0].collNum;
console.log("跳转到user_card");
wx.hideLoading();
wx.redirectTo({
url: '../user_card/user_card'
});
/*
wx.navigateTo({
url: '../user_card/user_card'
});
*/
} else {
wx.hideLoading();
wx.redirectTo({
url: '../no_card/no_card'
});
console.log("跳转到no_card");
}
} else {
//失败访问
wx.showToast({
title: '网络无响应',
icon: 'loading',
duration: 2000
});
}
},
error: function (res) {
wx.showToast({
title: '网络错误',
icon: 'loading',
duration: 2000
});
console.log(res);
}
})
wxml
页面结构，html中的div改成了view，a标签编程了navigator，onclick事件变成了bindtap，总之和html很像的。如果要显示出js的一些数据可以直接用双层大括号弄，比如说我在js文件中定义了name参数为slience，然后在前端显示，我就需要这样做
js部分
在wxml中使用
<text>{{name}}</text>就可以打印出name的值了
wxss
页面样式，相当于网页的css，几乎和css一样，只不过加了一系列专用的计量单位，原先的px现在多了rpx，原先的em到现在的rem，就是在原单位前面加了一个r，新的单位能够对不同分辨率的评论进行一些适配，推荐使用新单位。
app.json
此文件中定义了这个项目有多少个页面，他们的访问路径分别是多少，在我们创建新的页面的时候会自动加，最好不要修改这些页面的路径。还可以在这里设置导航条的内容，类似于html文件head中的title，以下是我的app.json
{
"pages": [
"pages/no_card/no_card",
"pages/logs/logs",
"pages/new_card/new_card",
"pages/user_card/user_card",
"pages/people_card/people_card",
"pages/change_card/change_card",
"pages/my_coll/my_coll",
"pages/about/about"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "你的小程序名",
"navigationBarTextStyle": "black"
}
}
定义一个公有函数（方式）
有的工具函数（比如说那种获取url中的指定参数、格式化日期等），那么我们就可以在app.js中这样写，
sayhello: function(e) {
wx.showToast({
title: '大家好',
});
},
然后我想在其他页面中使用这个方法可以这样，现在那个页面的js文件开头这样写var app = getApp();之后在需要用这个方法的地方这样写
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
console.log("调用方法啦");
app.sayhello();
}
参数赋值
在js中设置参数修改值然后前端显示最新的值，我想这是前端经常要用到的功能吧。因为wxml页面文件可能直接即时的显示js的参数，那么我直接修改js参数是不是会立刻改变页面显示的值呢。我是这样写的
页面文件test.wxml
<!--test.wxml-->
<button bindtap="test1">测试方法一</button>
<button bindtap="test2">测试方法二</button>
<view class="">当前用户名{{name}}</view>
动作文件
// test.js
Page({
/**
* 页面的初始数据
*/
data: {
name: ''
},
test1: function(e) {
name = "slience";
},
test2: function(e) {
this.setData({
name: "slience"
});
}
})
猜猜看按按钮一还是二可以即时的修改name为slience
。。。答案就是二，设置（修改）参数需要使用setData的方式然后前端就可以立马显示出效果了。如果控制台提示没有this.setData方法，你可以这样
test2: function(e) {
var page = this;
page.setData({
name: "slience"
});
}
获取文本框值
示例：用户在文本框中输入，点击按钮获取用户输入的数据并提示
wxml部分
<!--test.wxml-->
<input id="name_input" bindinput="name_input" />
<button bindtap="show_btn">弹出名字</button>
js部分
// test.js
Page({
/**
* 页面的初始数据
*/
data: {
name: ''
},
show_btn: function (e) {
wx.showToast({
title: this.data.name,
})
},
name_input: function(e) {
this.data.name = e.detail.value;
},
})
它的效果如下
嗯，先写到这，外面开始下雨了，凉快~
