微信小程序开发文档 部分记录
1.创建新小程序，不选择模板，开发工具自动创建project.config
2.根目录新建app.json文件，会根据文件生成相应的页面文件
{
"pages": [
"pages/index/index",
"pages/user/index"
],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list":[{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/index_2.png",
"selectedIconPath": "images/index_1.png"
},{
"pagePath": "pages/user/index",
"text": "我的",
"iconPath": "images/user_2.png",
"selectedIconPath": "images/user_1.png"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true
}pages 列表第一个为打开小程序的首页，底部菜单图片需要先上传
3.根目录创建app.js ，配置全局信息
App({
//设置全局请求URL
Au_url: 'https://api.cqhc.cn',
})4.尝试获取首页数据，先配置不验证域名
// pages\index\index.js 引入全局文件 const app = getApp();
// 尝试获取首页数据
getIndexData(){
wx.request({
url: app.Au_url + '/demo/indexData',
success: function (res) {
console.log(res);
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getIndexData();
},5.小程序跳转页面
js:
wx.navigateTo({
url: '/pages/user/index',
})wxml:
<navigator url="/pages/user/index"><button type="primary">我的</button></navigator>
6.尝试登录 https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html
pages\user\index.wxml
<button bindtap="login" type="primary">登录</button> <button bindtap="checklogin">验证登录</button>
pages\user\index.js
login(){
wx.login({
success (res) {
if (res.code) {
wx.request({
url: app.Au_url + '/demo/login',
data: {
code: res.code
},
success:function(res){
console.log(res);
wx.setStorageSync('au_user', res.data.data.au_user); // 以此来验证登录
}
});
} else {
console.log('登录失败！' + res.errMsg)
}
}
})
},后端：
$url = 'https://api.weixin.qq.com/sns/jscode2session?appid=wx83d179ce1caa1901&secret=e5f6e3a8bceb*********************&js_code='.$code.'&grant_type=authorization_code';
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET');
$response = json_decode(curl_exec($ch),1);
//print_r($response);
if($response['openid']){
// 登录
$cookie = md5($response['openid']);
cookie('au_user',$cookie);
$response['au_user'] = $cookie;
}
return json(['data' => $response]);7. 验证登录 携带au_user 进行验证
checklogin(){
wx.request({
url: app.Au_url + '/demo/checklogin',
data: {
au_user: wx.getStorageSync('au_user')
},
success:function (res) {
console.log(res);
}
})
},8.前端组件 https://developers.weixin.qq.com/miniprogram/dev/component/
<!--pages/index/index.wxml--> <text>pages/index/index.wxml</text> <view> <view> <!-- 图片 --> <image src="/images/index_1.png" mode=""/> </view> <view> <!-- 绑定时间 functionName 传参 name=param --> <button bindtap="functionName" type="primary" data-name="param">按钮</button> </view> <view> <!-- 导航跳转 特殊情况 跳转到菜单导航地址时 该方式不可用 --> <navigator url="/pages/user/index"><button type="primary">我的【不可用】</button></navigator> <navigator url="/pages/user/info"><button type="primary">我的【可用】</button></navigator> <!-- 跳转 js 配合跳转 特殊情况 跳转到菜单导航地址时 该方式不可用 --> <button bindtap="jump" data-url="/pages/user/index">跳转【不可用】</button> <button bindtap="jump" data-url="/pages/user/info">跳转【可用】</button> <!-- 特殊情况 --> <navigator open-type="switchTab" url="/pages/user/index"><button type="primary">我的【可用】</button></navigator> <button bindtap="jumpTab" data-url="/pages/user/index">跳转【可用】</button> </view> </view>
functionName()
{
},
jump(e){
console.log(e);
var url = e.currentTarget.dataset.url;
wx.navigateTo({
url: url,
})
},
jumpTab(e){
console.log(e);
var url = e.currentTarget.dataset.url;
wx.switchTab({
url: url,
})
} 