微信小程序 - 基础开发

结合微信小程序官方文档： 点击浏览

准备工作

1、注册小程序
（使用未关联微信或公众号的邮箱）
2、下载微信开发者工具 点击下载
（推荐稳定版）
3、下载VS Code 点击下载

注意

1、如果两个邮箱关联了公众号和小程序的话，那么登录可能会有问题，可能清除账号，重新扫码登录即可。

2、开发小程序时，参考本教程和微信开发者文档

3、VS code应该下载的插件


4、模拟机型推荐使用iphone6
尺量单位1px = 2rpx 推荐使用rpx
布局推荐使用flex

5、json文件不可以注释，会报错

6、项目结构

7、项目编译查看的方式
（1）
（2）通过app.json使用alt+上下方向键，移动要查看的页面路径到第一条

8、切换模拟器

9、将模拟器分离置顶

一、开发者工具介绍

1、打开微信开发者工具，新建项目

2、选择Appid或者测试号，不使用云服务，js语言


资源管理器

二、代码实操

1、VS code打开项目文件夹

2、清空index页面的所有信息（包括.wxml，.wxss, .js）

3、编写代码
index页面
index.wxml

<!--index.wxml-->
<!--
   view 块标签
   hover-class 按下去的状态类
   hover-stop-propagation="false" 阻止冒泡
   -->
<view class="box" hover-class="boxHover" hover-stop-propagation="false">
  <view class="item" hover-class="itemHover" hover-stop-propagation="false">
    123
  </view>
</view>

<!-- text行级标签 -->
<view class="out" hover-class="none" hover-stop-propagation="false">
  <text class="" selectable="false" space="false" decode="false">
    123
  </text>
</view>
<text class="" selectable="false" space="false" decode="false">
    345
</text>

<!-- 
  selectable boolean 长按可选择文本 
  space string  显示空格
    ensp: 中文字符空格一半大小
    emsp: 中文字符空格大小
    nbsp: 根据字体设置的空格大小
  decode  boolean 解码
-->
<text class="" selectable="true" space="ensp" decode="false">
  长按可选择文本
</text>

<!-- 
  src
  ../ 上级目录
  ./  当前目录
  /   根目录

  mode
  scaleToFill: 缩放: 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 原图： 处理后: 
  aspectFit: 缩放: 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 原图： 处理后: 
  aspectFill: 缩放: 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 原图： 处理后: 
  widthFix: 缩放: 宽度不变，高度自动变化，保持原图宽高比不变
  top: 裁剪: 不缩放图片，只显示图片的顶部区域 原图： 处理后: 
  bottom: 裁剪: 不缩放图片，只显示图片的底部区域 原图： 处理后: 
  center: 裁剪: 不缩放图片，只显示图片的中间区域 原图： 处理后: 

  show-menu-by-longpress  长按图片识别
-->
<image class="img" src="/assets/img/pp.jpg" mode="widthFix" show-menu-by-longpress lazy-load="false" binderror="" bindload="" >
</image>

<!-- 
  navigator 块元素
  url="/pages/logs/logs"  跳转小程序
  open-type="redirect"  重定向，关闭原页面
  reLaunch  关闭原页面，可以带参数
 -->
<view class="" hover-class="none" hover-stop-propagation="false">
  <navigator class="link" url="/pages/logs/logs">跳转到日志</navigator>
  <navigator url="/pages/logs/logs" open-type="redirect">跳转到日志</navigator>
  <navigator url="/pages/logs/logs" open-type="reLaunch">跳转到日志</navigator>
</view>

<!-- 
  enable-flex 开启flex布局 
  scroll-x="{{true}}" 向右滑动
  scroll-y="{{true}}" 向下滑动
  scroll-left scroll-top  滑动位置
  -->
<scroll-view class="srcOut" enable-flex scroll-x="{{true}}" scroll-left="150">
  <view class="srcBox">flex1</view>
  <view class="srcBox">flex2</view>
  <view class="srcBox">flex3</view>
  <view class="srcBox">flex4</view>
</scroll-view>

<scroll-view class="srcOut2" scroll-y="{{true}}" scroll-top="150">
  <view class="srcBox2">flex1</view>
  <view class="srcBox2">flex2</view>
  <view class="srcBox2">flex3</view>
  <view class="srcBox2">flex4</view>
</scroll-view>

index,wxss

/**index.wxss**/

.box{
  width: 200rpx;
  height: 200rpx;
  color: #fff;
  background-color: aqua;
}
.boxHover{
  width: 200rpx;
  height: 200rpx;
  color: #fff;
  background-color: antiquewhite;
}

.item{
  width: 100rpx;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  background-color: blueviolet;
}
.itemHover{
  width: 100rpx;
  height: 100rpx;
  background-color: #898;
}

.out{
  display: inline;
  color: blue;
}

.img{
  border: 2rpx solid #fff;
}

.link{
  height: 100rpx;
  background-color: aquamarine;
}

.srcOut{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: nowrap;
  border: 1rpx solid green;
}
.srcBox{
  flex: 0 0 100px;
  width: 100rpx;
  height: 100rpx;
  background-color: #f04;
  margin-right: 2rpx;
  margin-bottom: 1rpx;
}

.srcOut2{
  height: 300rpx;
  border: 1rpx solid 000;
}
.srcBox2{
  height: 100rpx;
  background-color: pink;
  border-bottom: 1rpx solid #fff;
}

index.json

{
  "usingComponents": {},
  "navigationBarTitleText": "首页",
  "backgroundColor": "#ff0",
  "enablePullDownRefresh": false
}

demo页面
demo.wxml

<!--pages/demo/demo.wxml-->

<!-- 
  轮播图

  下方白色小点
  indicator-dots="{{true}}" 
  indicator-color="#fff"  
  indicator-active-color="#fff"
  autoplay="{{true}}  自动播放
  interval="3000" 时间间隔
  circular="true" 循环，无限切换
   previous-margin 图片左边间隔
   next-margin  图片右边间隔
 -->
<swiper class="" indicator-dots="{{true}}" indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" previous-margin="20" next-margin="20" autoplay="{{true}}" interval="3000" circular="true">
  <swiper-item class="bannar" item-id="">
    <image class="" src="/assets/img/pp.jpg" mode="widthFix" lazy-load="false" binderror="" bindload="">
    </image>
  </swiper-item>
  <swiper-item class="bannar" item-id="">
    <image class="" src="/assets/img/pp2.jpg" mode="widthFix" lazy-load="false" binderror="" bindload="">
    </image>
  </swiper-item>
  <swiper-item class="bannar" item-id="">
    <image class="" src="/assets/img/pp3.jpg" mode="widthFix" lazy-load="false" binderror="" bindload="">
    </image>
  </swiper-item>
</swiper>

<!-- 按钮 -->
<view class="out" hover-class="none" hover-stop-propagation="false">
  <button class="btn1" type="primary">登录</button> 
  <button class="btn1" type="warn">退出登录</button>
  <button class="btn1" type="primary" plain>镂空</button> 
  <button class="btn1" type="primary" size="mini">支付</button>
  <button class="btn1" type="primary" disabled="{{true}}">禁用</button>
  <button class="btn1" type="primary" loading>等待...</button> 
  <button class="btn1" open-type="contact">联系客服</button> 
</view>

<!-- 表单 
  input
  placeholder-class
  auto-focus  自动聚焦
-->
<form bindsubmit="onSubmit">
  <input class="ip1" placeholder="请输入用户名：" placeholder-class="iptclass"></input>
  <input class="ip1" type="idcard" placeholder="请输入身份证号码："></input>
  <!-- 复选框 -->
  <checkbox class="" value="" disabled="false" checked="false" color="">
    复选框
  </checkbox>
  <switch class="" checked="false" type="switch|checkbox" bindchange="">
    切换
  </switch>
  <button form-type="submit">提交</button>
</form>


<view style="padding:50px;text-align:center" hover-class="none" hover-stop-propagation="false">
  <icon type="success" size="100" color="" /> 
  <view class="" hover-class="none" hover-stop-propagation="false">
    提交成功，感谢你的配合
  </view>
</view>

<view style="padding:50px" hover-class="none" hover-stop-propagation="false">
  <progress class="" percent="80" show-info font-size="15" border-radius="10" activeColor="pink" backgroundColor="#ccc">
  </progress> 
</view>

demo.wxss

/* pages/demo/demo.wxss */

.bannar image{
  width: 100%;
  height: auto;
}

button{
  margin-top: 10rpx;
}

.ip1{
  border: 1rpx solid #ddd;
  height: 70rpx;
  padding: 0 10rpx;
  box-sizing: border-box;
}
.iptclass{
  color: #ccc;
}

demo.json

{
  "usingComponents": {},
  "navigationBarTitleText": "案例",
  "backgroundColor": "#ff0",
  "enablePullDownRefresh": true
}

再加上系统自带logs页面

app.json全局配置
app.json

{
  "pages": [
    "pages/index/index",
    "pages/demo4/demo4",
    "pages/demo3/demo3",
    "pages/demo2/demo2",
    "pages/demo/demo",
    "pages/logs/logs",
    "pages/login/login"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#00f",
    "navigationBarTitleText": "来自鑫鑫的程序员",
    "navigationBarTextStyle": "white",
    "backgroundColor": "#ff0",
    "enablePullDownRefresh": false
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "assets/icon/index.png",
        "selectedIconPath": "assets/icon/index-h.png"
      },
      {
        "pagePath": "pages/demo/demo",
        "text": "案例",
        "iconPath": "assets/icon/index.png",
        "selectedIconPath": "assets/icon/index-h.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "assets/icon/index.png",
        "selectedIconPath": "assets/icon/index-h.png"
      }
    ],
    "color": "#fff",
    "selectedColor": "#0f0",
    "backgroundColor": "#f00",
    "position": "bottom"
  }
  ,
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

页面效果
index


demo


logs

demo2页面
demo2.wxml

<!--pages/demo2/demo2.wxml-->
<!-- 值 -->
<text>{{title}}</text>
<!-- 数组 -->
<text class="" selectable="false" space="false" decode="false">
  {{listArr[0]}}
</text>
<!-- 对象 -->
<text>{{obj.name}}</text>

<!-- 判断 -->
<text wx:if="{{false}}">
  hello1
</text>
<text wx:if="{{true}}">
  hello2
</text>

<view wx:if="{{false}}">world1</view>
<view wx:else>world2</view>


<text wx:if="{{false}}">1</text>
<text wx:elif="{{false}}">2</text>
<text wx:else>3</text>

<block wx:if="{{true}}">
  <!-- navigator不能跳转到tabBar页面 
  解决方法1：open-type="switchTab"
  
  -->
  <navigator url="/pages/logs/logs" open-type="switchTab">跳转</navigator>
</block>

<!-- 循环 -->
<!-- <view wx:for="{{50}}">xh</view> -->
<view wx:for="{{listArr}}">{{index}}#{{item}}</view>
<view wx:for="{{listArr}}" wx:for-index="i" wx:for-item="e">{{i}}#{{e}}</view>

<!-- 对象数组 -->
<view wx:for="{{obj2}}" wx:key="index">
  <!-- <text >文章标题</text> = <text>0101</text> -->
  <text >{{item.name}}</text> = <text>{{item.age}}</text>
</view>

<!-- 生命周期 js -->

<!-- 事件 -->
<!-- 
  触摸释放事件，相当于点击 
  data-  传递数据
  -->
<view bindtap = "myTap" data-title="微信小程序" data-id="123" style="background:#888"> 触摸释放事件</view>

<button bindtap = "navBack" type="default">返回上一页</button>

demo2.js

// pages/demo2/demo2.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    title:"小程序",
    listArr:[
      "循环1","循环2","循环3"
    ],
    obj:{
      name:"lili",
      age:"12"
    },
    obj2:
      [
        {name:"lili",age:"12"},
        {name:"lili2",age:"123"},
        {name:"lili3",age:"124"}
      ]
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("监听页面加载")
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log("监听页面初次渲染完成")
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log("监听页面显示")
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log("监听页面隐藏")
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log("监听页面卸载")
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log("监听用户下拉动作")
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("页面上拉触底事件的处理函数")
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    console.log("用户点击右上角分享")
  }
  ,
  myTap:function(res){
    // 查看数据 控制台currentTarget:
    console.log(res)
    // console.log("我被点击了")
    // 获取数据
    var newtitle=res.currentTarget.dataset.title
    console.log(this.data.title)
    // 设置数据
    this.setData({
      title:newtitle
    })
    
  },

  // 返回上一页
  navBack:function(){
    wx.navigateBack({
      delta: 1,
      complete: (res) => {},
    })
  }
})

demo2.json

{
  "usingComponents": {},
  "enablePullDownRefresh": true
}

页面效果
demo2



demo3页面
demo3.wxml

<!--pages/demo3/demo3.wxml-->
<view class="" style="color:#fff;background:{{bg}};width:{{wit}}rpx;height:{{hit}}rpx" hover-class="none" hover-stop-propagation="false">
  <text>{{title}}-{{class}}</text>
</view>
<view bindtap = "myTap" style="margin-top:20rpx;background:#0f0;width:200rpx;height:60rpx">点击设置内容</view>

<button type="primary" bindtap ="click_btn">跳转到日志</button>

demo3.js

// pages/demo3/demo3.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    title:"",
    wit:220,
    hit:130,
    bg:"#f00"
  },

  myTap:function() {
    this.setData({
      class:"━(*｀∀´*)ノ亻!",
      wit:240,
      hit:150,
      bg:"#0f0"
    })
  },

  // navigator跳转到普通页面
  click_btn:function(){
    // 可以实现翻页
    wx.navigateTo({
      url: '/pages/demo2/demo2',
    })

    // wx.reLaunch({
    //   url: '/pages/demo2/demo2?id=123',
    //   // 回调函数
    //   success:res=>{
    //     console.log(res)
    //   }
    // })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 通过setData改变data中的数据
    this.setData({
      title:"你好，鑫鑫.....",
    }),
    
    // 机型
    // console.log(wx.getSystemInfoSync())
    console.log(wx.getSystemInfoSync().model);

    // 用户交互
    // wx.showLoading({
    //   title: '数据加载中...',
    // })
    // setTimeout(res=>{
    //   wx.hideLoading()
    // },1500)

    wx.showToast({
      title:"提交成功",
    })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

页面效果
demo3


demo4页面
配置

demo4.wxml

<!-- 模拟数据 -->
<view class="out">
  <view class="row" wx:for="{{resData}}" wx:key="index">
    <view class="pic">
      <image src="{{item.picurl}}" mode="widthFix"></image>
    </view>

    <view class="text">
      <view class="title">{{item.title}}</view>
      <view class="time">{{item.posttime}} - {{item.author}}</view>
    </view>
  </view>

  <button bindtap = "nextpage" type="primary" size="mini">下一页</button>
</view>

demo4.wxss

/* pages/demo4/demo4.wxss */
.out{padding: 30rpx;box-sizing: border-box; padding: 10rpx 0;}
.row{display: flex;height: 140rpx;margin-bottom: 40rpx;}
.pic{flex: 2;}
.pic image{width: 100%;height: 100%;}
.text{flex: 8;border-bottom:1rpx solid #ccc;padding-left: 10rpx; display: flex; flex-direction: column;justify-content: space-between;}
.text .title{font-size: 38rpx;}
.text .time{color: #999;}

demo4.js

// pages/demo4/demo4.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    datalist:[
      {
        url:"/assets/img/pp.jpg",
        title:"标题1",
        time:"2020-02-03"
      },
      {
        url:"/assets/img/pp2.jpg",
        title:"标题2",
        time:"2020-02-04"
      },
      {
        url:"/assets/img/pp3.jpg",
        title:"标题3",
        time:"2020-02-05"
      }
    ],
    resData:[],
    num:1
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getlist();
  },

  // 下一页
  nextpage:function(){
    this.data.num++
    this.getlist(this.data.num);
  },

  // 封装请求 es6
  getlist:function(page=1){
    // request请求
    wx.request({
      url: 'https://edu.newsight.cn/wxList.php',
      data:{
        num:5,
        page:page
      },
      success:res=>{
        console.log(res.data);
        this.setData({
          resData:res.data
        })
      }
    })
  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

页面效果