简单记录微信小程序开发学习心得

微信小程序结构

参考微信官方文档链接即可

微信小程序页面周期

/**
  * 页面的初始数据
  */
 data: {
 	//页面的初始数据 数据键值对
 },
 onLoad: function (options) {
  //生命周期函数--监听页面加载
 },
 
 onReady: function () {
  //生命周期函数--监听页面初次渲染完成
 },
 
 onShow: function () {
  //生命周期函数--监听页面显示
 },
 
 onHide: function () {
 //生命周期函数--监听页面隐藏
 },
 
 onUnload: function () {
  //生命周期函数--监听页面卸载
 }

js文件-业务逻辑处理

目前本人接触到的js与html的js语法基本一致.
微信小程序内置了许多方法 具体查看微信官方文档链接即可.
我列举我比较常用的几个:

1. 下载:

	wx.downloadFile({
	  url: 'https://example.com/audio/123', //仅为示例，并非真实的资源
	  success (res) {
    // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
	    if (res.statusCode === 200) {
    		  wx.playVoice({
     	 	  filePath: res.tempFilePath
      })
    }
  }
})

2. 发起请求

wx.request({
 url: 'test.php', //仅为示例，并非真实的接口地址
 data: {
   x: '',
   y: ''
 },
 header: {
   'content-type': 'application/json' // 默认值
 },
 success (res) {
   console.log(res.data)
 }
})

3. 给页面初始数据赋值即给 data:{}内的键赋值
   setData()方法
   一般使用方法:

   var that = this;	//
   that.setData({
         navTab: types,
         fileList: files,
         measures: item
       });
   

   这里不直接使用this.setData 请浏览该篇文章,另外,使用箭头函数也可解决:

   wx.request({
    url: 'test.php', //仅为示例，并非真实的接口地址
    data: {
          x: '',
   	   y: ''
    },
     header: {
   	  'content-type': 'application/json' // 默认值
     },
     success :res=> {
   	  this.setData({
   	})
     }
   

   官方操作建议及指南

wxml文件-类html文件

具体标签查阅官方文档
较常用逻辑循环判断:

<block wx:for="{{条件}}" wx:for-item="循环的每个子元素" wx:for-index="每个子元素的下标" wx:key="unique">

有关wx:key 该部分较难 参阅该博客

wxss文件-类css文件

样式文件
最后在小程序发布时出现问题.由于本人是做java的,后端直接写好后部署在服务器,本地调用测试均没问题,小程序发布却审核失败,查阅咨询后,发现微信小程序需要配置域名信息,且域名信息需要与自己小程序内发请求的url处在同一域名下.建议ssl证书买正版,否则会出现错误.具体ssl证书安装,阿里云站内搜索有教程
以上仅是自己一点点学习记录,如果有错误,烦请指正