系列文章目录
提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加
养成笔记记录好习惯
提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
提示:这里可以添加本文要记录的大概内容:
最近学习微信小程序开发,先简单记录一下开发第一个demo的总结
提示:以下是本篇文章正文内容,下面案例可供参考
一、开发者工具
前台: 微信开发者工具
下载地址 :https://developers.weixin.qq.com/doc/ -> 选择小程序 -> 工具进行下载
后台 : idea
二、准备
1.注册开发者账号获取APPID
注册页面:
https://mp.weixin.qq.com/wxopen/waregister?action=step1
注意 : 由于是个人学习开发所以在主体类型选择个人,其他的选项需要注册商家资质等等!!!
2.登录
打开编译器会弹出二维码进行登录就行
三、开摆
由于本人学习比较废物,先看的视频如何前后台发送请求
1、新建文件夹 helloword
新建的文件夹里面是没有文件的,还需要创建page文件
文件创建完毕!!!
代码编写
1、
helloword.wxml 我的理解就是 写入HTML页面 但是注意语法和H5的写法有差异
helloword.wxss 我的理解就是 写入css
helloword.json 此文件暂时还没有用到还不太清楚后续修改!
helloword.js 就是 JavaScript
2.
helloword.wxml 代码展示
<!--pages/list/list.wxml-->
<text>后端返回信息:{{result}}</text>
helloword.wxss 暂未添加
helloword.json 暂未使用
helloword.js 代码展示
先定义个变量好接收后台返回
/**
* 页面的初始数据
*/
data: {
result:'请求后台中。。。。。'
},
一个简单的页面显示
3.注入神秘力量
helloword.js
下面展示一些 内联代码片
。
// pages/list/list.js
Page({
/**
* 页面的初始数据
*/
data: {
result:'请求后台中。。。。。'
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
var that=this;
this.getdate(that);
},
/**
* 封装后台请求方法
*/
getdate(that){
wx.request({
url: 'http://localhost:7114/sydw/interface/HELLOWORD', // 修改后的URL地址
method : 'GET',
success: function(res) {
console.log(res.data);
console.log(that);
that.setData({
result:res.data
})
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
(1)wx.request 就是微信文档中网络访问的方法!!
(2)success 就是微信框架集成的回调函数!!!
(3)that.setData({
result:res.data
}) 一定要注意 我做开始是 this.result = res.data 这个是错误的!
返回页面
总结
提示:这里对文章进行总结:
终于走出第一步了~~
视频参考连接
https://www.bilibili.com/video/BV1r64y1v7Kj/?spm_id_from=333.337.search-card.all.click&vd_source=85d6331d5787f97393a210c994de060c
P49 P50