小程序所需事项:
1.创建小程序(可根据已有的微信公众平台账号快速创建),小程序的简介填写并配置安全域名等。
2.微信开放平台创建小程序应用
3.服务器(添加443的端口)和域名需要有,可在服务器控制台内免费配置https证书,根据流程并配置到nginx中。
4.需要一个后台管理项目(已部署服务器的),用于小程序调用接口。
5.使用微信开发者工具(公众平台下载)进行代码编写及调试。(可先看官方文档)
6.代码完成后,在微信开发者工具内右上方点击上传,可上传到公众平台登录的小程序内,需提交审核(大概两小时左右),并发布。
7.发布成功后,用户可在微信内(发现-搜索框)通过名称、简称或关键字搜索小程序,或者公众平台登录的小程序内下载小程序的二维码,可扫码进入。
以上是个人总结的完整小程序所涉及到的东西。若有问题请留言指正或探讨。
数据交互:
在pages同级目录下添加config文件的app.js,存放所有的接口地址,便于管理。
在.js文件内写数据交互代码,先引入接口路径文件:var api = require("…/…/config/api.js"),
wx.request({
url: 'api.SystemddlListUrl', //接口地址,访问后台项目的接口
data: { //data中的参数值将传递给后台
"page":that.data.searchPageNum,"source":"中国"
},
header: {
'content-type': 'application/json' //默认值
},
success: function(res) { //res是接收后台返回的数据
let list = res.data.data;
for(let index in res.data.data){ //循环操作
}
that.setData({ //setData是将后台返回的数据存入,可在页面展示
list: res.data.data
})
console.log(res.data);
},
fail: function(res) {
console.log("失败");
}
})
.wxml文件是页面结构,就是html
<view class='swiper_mid' wx:for="{{list}}"> //for循环展示数据
<view class="main" data-gid='{{item.id}}' bindtap="detail"> //bindtap 点击事件
<view class='main-middle'>
<view class='middle-top'>
{{item.title}}
</view>
<view class="middle_all">
<view class='middle-zhong'>
{{item.time}}
</view>
</view>
</view>
<view class='main-right'>
<image src='{{item.imgSrc}}'></image>
</view>
</view>
</view>