小程序入门

朋友们，此笔记适合一边看视频一边对照，或者学完课程后回顾重点。没看视频的看这个笔记可能会不知所云。
如果有疑问或者建议欢迎提出，以帮助我完善笔记，谢谢。

---

一，小程序特点

• 免安装
• 类似于app
• 必须在微信中使用

二，用户获得小程序方式

• 搜索与附近的小程序
• 扫一扫与长按识别小程序码
• 好友分享
• 与公众号关联
• 第三方小程序应用商店
• 小程序之间互相跳转

三，小程序的官方文档

地址：https://developers.weixin.qq.com/miniprogram/dev/

四，小程序开发流程

1. 注册小程序
2. 代码开发
3. 提审（微信官方审核）
4. 上线

五，注册小程序

我的注册邮箱是：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>