微信小程序开发

一、页面结构

全局文件

• app.js 小程序入口文件、云api
• app.json 小程序全局配置
• app.wxss 小程序全局样式

小程序常用全局配置项

• entryPagePath: “pages/index/index” 小程序默认启动首页

• pages: [“pages/foot/foot”] 页面列表（添加页面自动生成页面文件）

• window:{ 全局的窗口表现
  navigationBarTitleText:“xxx” 导航栏标题内容
  navigationBarBackgroundColor:“xxx” 导航栏背景色
  navigationBarTextStyle:“xxx” 导航栏字体色，仅支持 black / white
  navigationStyle:“default” 导航栏样式，可选custom（只保留右上角胶囊按钮）
  backgroundTextStyle：“dark” 下拉 loading 的样式，仅支持 dark / light
  backgroundColor: #ffffff 窗口的颜色（下拉刷新时显示）
  enablePullDownRefresh: false 是否全局开始下拉刷新
  onReachBottomDistance: 50 页面上拉触底事件触发时距页面底部距离，单位为px
  }

• “tabBar”: { 底部栏tab的表现
  “color”: “#707070”,
  “selectedColor”: “#5ec282”,
  “list”:[
  {
  “text”: “首页”,
  “pagePath”: “pages/index/index”,
  “iconPath”: “/images/home1.png”,
  “selectedIconPath”: “/images/home2.png”
  },
  {
  “text”: “个人中心”,
  “pagePath”: “pages/person/person”,
  “iconPath”: “/images/person1.png”,
  “selectedIconPath”: “/images/person2.png”
  }
  ]
  },

页面文件

每个页面对应四个文件

• index.js 页面入口文件
• index.json 页面配置文件
• index.wxml 页面内容
• index.wxss 页面样式

二、小程序的生命周期

app全局生命周期

• onLaunch 小程序启动时调用（一次性）
• onShow 第一次初始化完毕、从后台切换前台调用
• onHide 前台切换到后台

页面生命周期

• onLoad 页面加载（一次）
• onShow 页面显示、切前台
• onReady 页面初次渲染完成（一次）
• onHide 页面隐藏（切后台）
• onUnload 页面卸载（一次）

整体流程

onLaunch小程序启动 > onShow第一次初始化完毕(app) > onLoad页面加载 > onShow(page)页面显示 > onReady页面初次渲染完成

三、条件渲染和列表渲染

条件渲染

 <view wx:if="{{view == 'xxx'}}"></view>
 <view wx:elif="{{view == 'xxx'}}"></view>
 <view wx:else></view>

列表渲染

<block wx:for="{{logs}}" wx:key="timeStamp" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log.date}}</text>
</block>

wx:for-item=“log” 表示循环数组的每一项命名为log 默认是item 索引默认是index

四、发送请求

必须是https协议

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

接口调用报错

xxx 不在以下request合法域名列表中

解决方法

开发阶段解决方案：不校验合法域名
编辑器右上角详情菜单 本地设置 选中不校验合法域名

上线阶段解决方案：绑定请求接口域名
官方文档 > 开发管理> 开发设置> 服务器域名

获取地理信息、速度等

wx.getLocation({
 type: 'wgs84',
 success (res) {
   const latitude = res.latitude
   const longitude = res.longitude
   const speed = res.speed
   const accuracy = res.accuracy
 }
})

解决提示：“getLocation需要在app.json中声明permission字段问题”

app.json中添加配置项

"permission":{
	"scope.userLocation":{
		"desc": "尝试获取您的位置信息"
	}
}

五、模版（组件）的使用

定义模版

<template name="my-footer">
  <view>
    <text>这是footer模版</text>
  </view>
</template>

使用模版

<import src="../../template/footer"/>
<template is="my-footer" data=""/>

六、发布小程序

上传代码 > 小程序管理后台 > 管理 > 版本管理 > 开发版本 > 提交审核