朋友们，此笔记适合一边看视频一边对照，或者学完课程后回顾重点。没看视频的看这个笔记可能会不知所云。
如果有疑问或者建议欢迎提出，以帮助我完善笔记，谢谢。
一，小程序特点
- 免安装
- 类似于app
- 必须在微信中使用
二，用户获得小程序方式
- 搜索与附近的小程序
- 扫一扫与长按识别小程序码
- 好友分享
- 与公众号关联
- 第三方小程序应用商店
- 小程序之间互相跳转
三，小程序的官方文档
地址：https://developers.weixin.qq.com/miniprogram/dev/
四，小程序开发流程
- 注册小程序
- 代码开发
- 提审（微信官方审核）
- 上线
五，注册小程序
我的注册邮箱是：12273056@bjtu.edu.cn
六，新建小程序项目
打开微信开发者工具（开发者工具下载地址)，登陆，创建目录，填写appID（微信公众平台--设置--开发设置），会有一个默认的hello world项目。
七，代码结构（慕课网的信贷demo）
八，代码编写参考
- 主要参考小程序开发文档的框架部分：https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html。
- 我的代码在github上：https://github.com/beautiful523/wx_xcx_xindai/tree/master/weichat_mini_program
九，底部导航栏
底部导航栏tabBar写到app.json里面，因为是全局的元素
十，首页开发
- 轮播图：微信公众平台--小程序开发--组件，写到index.wxml
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
-
index.wxml中，轮播图下面的内容类似前端，讲div改成view标签，在wxss里面设置相应的样式
-
联系客服：在button上加一个属性open-type='contact'即可
-
点击查看详情：在button上加一个属性bindtap='to_detail'绑定点击响应函数，然后在js中添加to_detail函数
十一，加入页面开发
- 电话咨询：在button上加一个属性bindtap='te le'绑定点击响应函数，然后在js中添加tele函数
tele: function(){
wx.makePhoneCall({
phoneNumber: '13611044648',
})
}
十二，API的请求
- 目标：从服务端get产品列表需要的数据
- 微信开发者工具-->右上角更多-->详情-->不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书-->钩上
- 本地启动一个flask服务，我的代码在github上面：https://github.com/beautiful523/wx_xcx_xindai/tree/master/wechat_service
- 在首页的js文件中定义一个getProList的方法，向服务器发请求：
getProList: function(){
var self = this;
wx.request({
url: 'http://127.0.0.1:5000/',
method:'GET',
success: function(res){
self.setData({
pro_list: res.data
})
}
})
}
- 在同一个js文件里的onload函数里面执行getProList():
onLoad: function () {
this.getProList()
}
十三，不同页面的传值方法(一)：路由里面带参数传
- 例如：将首页的值传到详情页
- app.json--pages的数据里面加"pages/detail/detail"--pages目录下会自动多出来detail模块
- 编写首页js的to_detail函数，把首页中的各个title值传到相应的详情页：
to_detail: function(e){
var index = e.currentTarget.dataset.aaa;
var proList = this.data.pro_list;
var title = proList[index].title;
wx.navigateTo({
url: '/pages/detail/detail?title='+title,
})
},
- 在详情页的js中将传过来的title赋值给详情页页面初始数据data
Page({
/**
* 页面的初始数据
*/
data: {
title:null,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
title: options.title,
})
},
})
- 在详情页的wxml部分直接用双花括号调用title数据：
<text>这篇文章的标题是：{{title}}</text>
- 这样，当你在首页单击查看详情，就会直接跳转到详情页，并显示响应的数据。
十四，不同页面的传值方法(二)：全局变量
- 在app.js里面globalData加一条数据:
host:'http://localhost:5000', - 在首页js获取实例才能使用app.js里面的东西
//index.js
//获取应用实例
const app = getApp()
- url就可以直接写 app.globalData.host，来代替
http://localhost:5000
wx.request({
url: app.globalData.host,
method:'GET',
success: function(res){
self.setData({
pro_list: res.data
})
},
fail:function(){
console.log(111)
}
})
十五，不同页面的传值方法(三)：setStorage本地缓存
- 最大支持缓存10兆的内容
- 修改首页js的to_detail函数，通过本地缓存把首页中的各个desc值传到相应的详情页：
var desc = proList[index].desc;
wx.setStorageSync('desc', desc)
- 在详情页的js中获取本地缓存中的desc并赋值给详情页页面初始数据data
onLoad: function (options) {
var desc = wx.getStorageSync('desc');
this.setData({
title: options.title,
desc: desc,
})
}
- 在详情页的wxml部分直接用双花括号调用title数据：
<text>这篇文章的标题是：{{title}}</text>
<text>这篇文章的内容是：{{desc}}</text>
网友评论