小程序的开发

安装

到

https://developers.weixin.qq.com/miniprogram/dev/framework/

下载微信开发者工具
到https://mp.weixin.qq.com/ 注册

开始打开小程序开发工具

进行如下步骤（一下仅供个人开发使用的是js）

然后进入之后左边各文件代表的意思
pages存放页面的文件夹
-index首页
-index.js首页的业务逻辑
-index.json首页的配置
-index.wxml首页的模板（对应的html）
-index.wxss首页的样式写法与css相同
-logs日志页面
utils工具
util.js工具js
eslintrc语法检测配置
app.js小程序入口js
app.json小程序配置
app.wxss小程序全局样式
project.config.json项目的配置
project.private.config.json个人项目配置
sitemap.json站点地图（告诉微信哪些页面可以被收录）

app.json里的一些数据

与平常html区别

1.标签名字有点不一样
从下边边的例子可以看到，小程序的 WXML 用的标签是 view, button, text 等等

<view class="container">
  <view class="userinfo">
    <button wx:if="{
  {!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
    <block wx:else>
      <image src="{
  {userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{
  {userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{
  {motto}}</text>
  </view>
</view>

我的理解是view对应着div 而text对应span
2.多了一些 wx:if 这样的属性以及 { { }} 这样的表达式跟vue差不多如果学过vue那么这些应该也不难

模板

在template中写 想要传送数据的话现在主页定义数据然后在对应组件中写入data='{ {…数据}}"

定义模板
<template name="msgItem">
  <view>
    <text> {
  {index}}: {
  {msg}} </text>
    <text> Time: {
  {time}} </text>
  </view>
</template>
使用模板
<template is="msgItem" data="{
  {...item}}"/>
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

表单（与下方事件相结合查看）

<input  value="{
  {s1}}" bindinput="inputHd"/> 
 inputHd(e){
  console.log(e);
  var s1=e.detail.value;
  this.setData({s1:s1})
},直接在page中写与data同级 
setData setData 是小程序开发中使用最频繁、也是最容易引发性能问题的接口。
✅ 仅在需要进行页面内容更新时调用 setData；
✅ 对连续的 setData 调用尽可能的进行合并；
❌ 避免不必要的 setData；
❌ 避免以过高的频率持续调用 setData，例如毫秒级的倒计时；
❌ 避免在 onPageScroll 回调中每次都调用 setData

事件

事件的传参
<button data-msg="xxx" bindtap="tapHd">
获取事件的参数  e.target.dataset.msg
bindconfirm表单输入确认
bindtap点击时候
bindinput	键盘输入时触发，event.detail = {value, cursor, keyCode}，
 //bindfocus输入框聚焦时触发，类似的还有很多 inputHd即触发的事件在js中写即可

页面切换

假如在文档中直接使用

<navigateTo>组件跳转..
api跳转
wx.navigateTo跳转
wx.switchTab切换底部栏
wx.redirect重定向
wx.reLaunch重启
在下一页中可以使用<navigator open-type="navigateBack" >返回</navigator>返回
而redirect使用完左上角会出现一个回到主页的按钮

底部菜单tabBar

全局的在App.json中配置格式如下

  "tabBar": {
    "color": "#777",
    "selectedColor": "#1cb9ce",
    "list":