小程序初体验
一. 注册小程序（不注册小程序，跳过这一步）
1.进入https://mp.weixin.qq.com/,选择立即注册，选择小程序，补充 邮箱激活+身份验证+手机验证码+微信扫码认证，然后进入页面，每次登录需要验证微信号。
2.左侧功能栏
开发管理：控制小程序版本（通过微信开发者工具的上传代码，在此处进行审核，审核通过后，点击发布，可以通过微信搜索到小程序）
用户身份：小程序项目成员（配置不同的权限，开发、体验等）
设置：
基本设置：小程序名称，头像，小程序码，介绍，服务类目等信息设置
开发设置：开发者ID（AppID(小程序ID)小程序唯一识别码，AppSecret(小程序密钥)和APPID加上wx.login返回的code，可以获取用户的openid（用户唯一识别码）），服务器域名（在这里配置了的域名，才能被请求成功）
关联设置：关联公众号
3.下载小程序开发者工具（https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html）
4.查看小程序开发文档（了解常用组件及API https://developers.weixin.qq.com/miniprogram/dev/index.html）
二. 了解微信开发者工具
1.打开小程序开发者工具，扫码登录，选择项目本地文件夹，输入小程序AppID（未注册小程序，不需要填AppID，选择体验小程序），建立普通快速模板，点击确定。
2..左上方3个绿色按钮，控制开发界面，
模拟器：模拟小程序在客户端的真实体验； 编辑器：代码编写页面，可以用常用工具进行开发，再在开发者工具上进行查看； 调试器：和谷歌浏览器调试差不多，多了微信的缓存内容和请求数据选项等；
编译按钮：重新编译项目； 清缓存按钮：清除数据缓存； 上传按钮：提交代码，然后再在版本管理提交审核，审核成功后可发布；
详情按钮：项目存放位置，项目大小，上传时间，项目设置（本地开发，勾选不校验域名），域名信息，腾讯云服务器状态等信息
3.根部包含4个全局文件（https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html）
app.js：小程序逻辑，如注释写的onlaunch方法有三大功能，浏览器缓存进行存和取数据，用登陆成功的回调，获取用户信息；globalData是定义整个项目的全局变量或者常量。
app.json：小程序公共设置，比如注册页面，配置顶部文字背景，底部页签等。
{
"pages": [
"pages/houseList/houseList",
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#ea5419",
"navigationBarTitleText": "demo",
"navigationBarTextStyle": "light"
},
"tabBar": {
"list": [
{
"pagePath": "pages/houseList/houseList",
"text": "列表"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
}
}
app.wxss：全局样式，相同标签下的属性会被子页面的样式覆盖；
project.config.json：项目配置文件
Pages包含页面，每个页面下分别有xxx.js，xxx.json，xxx.wxml，xxx.wxss
三. 实现小程序Demo
1.明确功能点 顶部文字背景，底部tabBar页签，轮播图，列表，跳转功能。
2.开发功能
a.新建houseList文件夹，新建page页面，包含houseList.js，houseList.json，houseList.wxml，houseList.wxss
新建houseDetail文件夹，新建page页面，包含houseDetail.js，houseDetail.json，houseDetail.wxml，houseDetail.wxss
b.在app.json（该文件里不能写注释）添加新增的页面路径（pages），文件设置顶部文字背景（window），底部页签（tabBar）
{ "pages": [ "pages/houseList/houseList", "pages/index/index", "pages/logs/logs" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#ea5419", "navigationBarTitleText": "demo", "navigationBarTextStyle": "light" }, "tabBar": { "list": [ { "pagePath": "pages/houseList/houseList", "text": "列表" }, { "pagePath": "pages/logs/logs", "text": "日志" } ] } }
c.引用样式到houseList.wxss文件
/* pages/houseList/houseList.wxss */ .container { background-color: #fff; min-height: 100%; } /**轮播图 begin**/ .swiper-container { width: 750rpx; position: relative; } .swiper-box { width: 100%; height: 362.5rpx; } swiper-item image { width: 100%; display: inline-block; overflow: hidden; height: 362.5rpx; } .swiper-container .dots { position: absolute; left: 0; right: 0; bottom: 20rpx; display: flex; justify-content: center; } .swiper-container .dots .dot { margin: 0 8rpx; width: 14rpx; height: 14rpx; background: #fff; border-radius: 50%; transition: all 0.6s; opacity: 0.5; } .swiper-container .dots .dot.active { width: 14rpx; opacity: 1; } /**轮播图 end**/ /**列表模块 begin**/ .news { margin-top: 10rpx; width: 750rpx; background: #fff; display: flex; flex-direction: column; } .news .newslist { display: flex; flex-direction: row; width: 720rpx; margin: 0 auto; border-bottom: 1px solid #efefef; padding-top: 10rpx; padding-bottom: 10rpx; } .news .newslist .pic { width: 35%; height: 220rpx; line-height: 220rpx; align-items: center; justify-content: center; display: flex; } .news .newslist .pic image { width: 260rpx; height: 190rpx; } .news .newslist .title { width: 65%; flex-direction: column; display: flex; justify-content: space-between; height: 190rpx; padding-top: 25rpx; } .news .newslist .title .address { padding-left: 5%; text-align: left; font-size: 0.7rem; color: #000; display: flex; flex-direction: column; justify-content: space-between; height: 110rpx; } .news .newslist .title .address view:nth-child(1) { height: 30rpx; line-height: 30rpx; font-size: 0.8rem; } .news .newslist .title .address view:nth-child(2) { height: 30rpx; line-height: 30rpx; color: #979797; } .news .newslist .title .address view:nth-child(3) { height: 30rpx; line-height: 30rpx; color: #979797; } .news .newslist .title .price { padding-left: 5%; text-align: left; font-size: 0.7rem; color: #6a6a6a; display: flex; flex-direction: row; justify-content: space-between; height: 60rpx; line-height: 60rpx; align-self: baseline; width: 450rpx; } .news .newslist .title .price view text { padding: 10rpx 15rpx; border-radius: 3rpx; margin-right: 5rpx; height: 20rpx; line-height: 20rpx; color: #77af6e; background: #f7f5f6; } .news .newslist .title .price .money { color: #d65408; font-weight: bold; font-size: 1rem; padding-right: 10rpx; } /**列表模块 end**/
d.开发页面 (组件地址：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html)
houseList.wxml
<!--pages/houseList/houseList.wxml--> <view class="container"> <!--轮播图 begin--> <view class="swiper-container"> <swiper class="swiper-box" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" indicator-active-color="{{indicatorActiveColor}}"> <block wx:for="{{imgUrls}}" wx:key="{{index}}"> <swiper-item> <image src="{{item}}" class="slide-image" width="355" height="150" /> </swiper-item> </block> </swiper> </view> <!--轮播图 end--> <!--列表 begin--> <view class="news"> <view class="newslist" wx:for="{{houseList}}" wx:key="{{item.id}}" data-id="{{item.id}}" bindtap="toDetailViewTap"> <view class="pic"> <image src="{{item.thumb}}"></image> </view> <view class="title"> <view class="address"> <view>{{item.houseName}}</view> <view>{{item.companyName}}</view> <view>{{item.houseAddress}}</view> </view> <view class="price"> <view> <text>{{item.areaName}}</text> <text>{{item.houseTypeName}}</text> </view> <view class="money"> {{item.housePrice}}元 </view> </view> </view> </view> </view> <!--列表 end--> </view>
e.页面交互（API地址：https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html）
houseList.js（与后台交互）
// pages/houseList/houseList.js var page = 1; Page({ /** * 页面的初始数据 */ data: { imgUrls: [ 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' ], indicatorDots: true, autoplay: true, interval: 2000, duration: 1000, circular: true, indicatorActiveColor: "#ea5419", houseList: [] }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { this.getHouseList(1) }, /** * 上拉加载更多数据 */ onReachBottom: function() { this.getHouseList(page) }, /** * 列表加载 */ getHouseList: function(pg) { var that = this; //换成可以请求的服务器地址 var apiUrl = "http://localhost:8080/demo/listDemo"; var reqData = { page: page } wx.request({ url: apiUrl, data: reqData, method: "GET", success(res) { console.log(res.data) var tmpArr = that.data.houseList; tmpArr.push.apply(tmpArr, res.data.demoList); that.setData({ houseList: tmpArr }) page++ } }) }, /** * 跳转详情页面 */ toDetailViewTap: function(e) { var id = e.currentTarget.dataset.id wx.navigateTo({ url: '../houseDetail/houseDetail?id=' + id, }) } })
houseList.js(不与后台交互)
// pages/houseList/houseList.js var page = 1; Page({ /** * 页面的初始数据 */ data: { imgUrls: [ 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' ], indicatorDots: true, autoplay: true, interval: 2000, duration: 1000, circular: true, indicatorActiveColor: "#ea5419", houseList: [{ "id": 1, "thumb": "https://ss0.baidu.com/73t1bjeh1BF3odCf/it/u=4000667027,4080304978&fm=85&s=5C7239C10A470A5F16A2AD110300D08A", "houseName": "塘朗万科云城", "companyName": "万科物业", "houseAddress": "塘朗地铁站", "areaName": "[龙华]", "houseTypeName": "学区房", "housePrice": "80000" }, { "id": 2, "thumb": "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3457818438,3965580366&fm=85&app=52&f=JPEG?w=121&h=75&s=5C9607D1DA32A6CE463C6D010300F0C3", "houseName": "华润", "companyName": "华润置地物业", "houseAddress": "西乡地铁站", "areaName": "[西乡]", "houseTypeName": "住宅", "housePrice": "60000" }, { "id": 3, "thumb": "https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=1230677701,1255423433&fm=85&s=EFBC30C58E316A0F549455710300D0D0", "houseName": "美的", "companyName": "美的置地物业", "houseAddress": "六约地铁站", "areaName": "[龙岗]", "houseTypeName": "住宅", "housePrice": "40000" }, { "id": 4, "thumb": "http://img2.imgtn.bdimg.com/it/u=3960281761,1343386499&fm=26&gp=0.jpg", "houseName": "万达", "companyName": "万达地产", "houseAddress": "民治地铁站", "areaName": "[龙华]", "houseTypeName": "住宅", "housePrice": "40000" }, { "id": 5, "thumb": "http://img2.imgtn.bdimg.com/it/u=3253153544,3740453368&fm=26&gp=0.jpg", "houseName": "万达1", "companyName": "万达", "houseAddress": "深圳市", "areaName": "盐田区", "houseTypeName": "别墅", "housePrice": "120000" }] }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { this.getHouseList() }, /** * 上拉加载更多数据 */ onReachBottom: function() { }, /** * 列表加载 */ getHouseList: function() { var that = this; that.setData({ houseList: that.data.houseList }) }, /** * 跳转详情页面 */ toDetailViewTap: function(e) { var id = e.currentTarget.dataset.id wx.navigateTo({ url: '../houseDetail/houseDetail?id=' + id, }) } })
SQL：
/* Navicat MySQL Data Transfer Source Server : localhost Source Server Version : 50641 Source Host : localhost:3306 Source Database : milike_demo Target Server Type : MYSQL Target Server Version : 50641 File Encoding : 65001 Date: 2018-10-09 18:20:13 */ SET FOREIGN_KEY_CHECKS=0; -- ---------------------------- -- Table structure for tb_demo -- ---------------------------- DROP TABLE IF EXISTS `tb_demo`; CREATE TABLE `tb_demo` ( `id` int(20) NOT NULL AUTO_INCREMENT, `thumb` varchar(500) DEFAULT NULL, `company_name` varchar(100) DEFAULT NULL, `house_name` varchar(100) DEFAULT NULL, `house_address` varchar(100) DEFAULT NULL, `house_type_name` varchar(100) DEFAULT NULL, `house_price` varchar(100) DEFAULT NULL, `area_name` varchar(100) DEFAULT NULL, `create_date` datetime DEFAULT NULL, `update_date` datetime DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8; -- ---------------------------- -- Records of tb_demo -- ---------------------------- INSERT INTO `tb_demo` VALUES ('1', 'https://ss0.baidu.com/73t1bjeh1BF3odCf/it/u=4000667027,4080304978&fm=85&s=5C7239C10A470A5F16A2AD110300D08A', '万科物业', '塘朗万科云城', '塘朗地铁站', '学区房', '80000', '[龙华]', '2018-09-11 14:48:37', '2018-09-11 14:57:41'); INSERT INTO `tb_demo` VALUES ('2', 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3457818438,3965580366&fm=85&app=52&f=JPEG?w=121&h=75&s=5C9607D1DA32A6CE463C6D010300F0C3', '华润置地物业', '华润', '西乡地铁站', '住宅', '60000', '[西乡]', '2018-09-11 14:49:44', '2018-09-11 14:57:41'); INSERT INTO `tb_demo` VALUES ('3', 'https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=1230677701,1255423433&fm=85&s=EFBC30C58E316A0F549455710300D0D0', '美的置地物业', '美的', '六约地铁站', '住宅', '40000', '[龙岗]', '2018-09-11 14:50:46', '2018-09-11 14:57:41'); INSERT INTO `tb_demo` VALUES ('4', 'http://img2.imgtn.bdimg.com/it/u=3960281761,1343386499&fm=26&gp=0.jpg', '万达地产', '万达', '民治地铁站', '住宅', '40000', '[龙华]', '2018-09-11 14:57:41', '2018-09-11 14:57:41'); INSERT INTO `tb_demo` VALUES ('5', 'http://img2.imgtn.bdimg.com/it/u=3253153544,3740453368&fm=26&gp=0.jpg', '万达', '万达1', '深圳市', '别墅', '120000', '盐田区', '2018-09-11 14:57:41', '2018-09-11 14:57:41'); INSERT INTO `tb_demo` VALUES ('6', 'http://img2.imgtn.bdimg.com/it/u=716780685,3304319981&fm=200&gp=0.jpg', '万达', '万达2', '深圳市', '住房', '80000', '盐田区', '2018-09-11 14:57:41', '2018-09-11 14:57:41'); INSERT INTO `tb_demo` VALUES ('7', 'http://img2.imgtn.bdimg.com/it/u=3253153544,3740453368&fm=26&gp=0.jpg', '万达', '万达3', '深圳市', '住房', '80000', '盐田区', '2018-09-11 14:57:41', '2018-09-11 14:57:41'); INSERT INTO `tb_demo` VALUES ('8', 'http://img2.imgtn.bdimg.com/it/u=3253153544,3740453368&fm=26&gp=0.jpg', '万达', '万达4', '深圳市', '别墅', '120000', '盐田区', '2018-09-11 14:57:41', '2018-09-11 14:57:41'); INSERT INTO `tb_demo` VALUES ('9', 'http://img2.imgtn.bdimg.com/it/u=3253153544,3740453368&fm=26&gp=0.jpg', '万达', '万达5', '深圳市', '别墅', '120000', '盐田区', '2018-09-11 14:57:41', '2018-09-11 14:57:41'); INSERT INTO `tb_demo` VALUES ('10', 'http://img2.imgtn.bdimg.com/it/u=3253153544,3740453368&fm=26&gp=0.jpg', '万达', '万达6', '深圳市', '学区房', '90000', '盐田区', '2018-09-11 14:57:41', '2018-09-11 14:57:41'); INSERT INTO `tb_demo` VALUES ('11', 'http://img1.imgtn.bdimg.com/it/u=3988596386,439715187&fm=26&gp=0.jpg', '万达', '万达7', '深圳市', '民宿', '70000', '盐田区', '2018-09-11 14:57:41', '2018-09-11 14:57:41'); INSERT INTO `tb_demo` VALUES ('12', 'http://img2.imgtn.bdimg.com/it/u=3253153544,3740453368&fm=26&gp=0.jpg', '万达', '万达8', '深圳市', '别墅', '120000', '盐田区', '2018-09-11 14:57:41', '2018-09-11 14:57:41');
浙公网安备 33010602011771号