微信小程序入门

微信小程序 入门

一.概述

1.注册小程序账号

https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN
注册邮箱：1123372911@qq.com

2.安装开发者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

3.获取appID

我的：wx006880ae481cff72

4.vscode插件安装

minapp
小程序助手
vscode weapp api 
vscode wxml 
vscode-wechat 
WeApp Snippets
wechat-snippet
vscode-icons

5.豆瓣接口

http://t.yushu.im/v2/movie/top250
https://douban.uieee.com/v2/movie/top250
https://douban.uieee.com/v2/movie/in_theaters  //正在热映
https://douban.uieee.com/v2/movie/coming_soon //即将上映
https://douban.uieee.com/v2/movie/us_box //北美票房
https://douban.uieee.com/v2/movie/new_movies //新片榜
https://douban.uieee.com/v2/movie/weekly //本周口碑榜

//搜索
https://douban.uieee.com/v2/movie/search?q=keyword

//搜索书籍
https://api.douban.com/v2/book/search?q=javascript&count=1

//条目信息
http://t.yushu.im/v2/movie/subject/3

//获取固定数量的数据
http://t.yushu.im/v2/movie/top250?start=0&count=20

6.开发者文档

https://developers.weixin.qq.com/miniprogram/dev/index.html?t=18080816 

app.json --项目的一些配置信息
index.wxml -- 写标签（页面）
index.wxss -- 修改样式

.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件

二.各类型文件/配置

1.小程序配置 app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等 ，是程序的入口

详情可查 小程序框架文档
{
  "pages": [
  "pages/index/index", 
  "pages/logs/logs"
  ],
  "window": {
     "navigationBarBackgroundColor": "#333",
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "小程序",
        "navigationStyle": "default|custom",
        "backgroundColor": "#333",
        "backgroundTextStyle": "dark|light",
        "backgroundColorTop": "#ffffff",
        "backgroundColorBottom": "#ffffff",
        "enablePullDownRefresh": false,
        "onReachBottomDistance": 50
  }，
   "tabBar": {
    "color": "#666",
    "selectedColor": "#3785F9",
    "position": "bottom",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "电影",
        "iconPath": "/images/dianying.png",
        "selectedIconPath": "/images/dianying_hl.png"
      },
      {
        "pagePath": "pages/map/map",
        "text": "地图",
        "iconPath": "/images/map.png",
        "selectedIconPath": "/images/map_hl.png"
      }
    ]
  }
}

1. pages字段 —— 当前小程序所有页面路径列表。
2. window字段 —— 全局的默认窗口表现， 所有页面的顶部背景颜色，文字颜色定义等。
3. tabBar字段-- 底部 tab 栏的表现

2.小程序app.js和page.js

app.js:

小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行:
App({
    onLaunch: function () {
    	//监听
       //小程序启动之后 触发
    },
    onShow: function () {
        //浏览时触发
    },
    onHide: function () {
       //关闭或隐藏时触发
    }
})

page.js

Page({
  data: { // 参与页面渲染的数据
    logs: []
  },
  onLoad() {
    // 页面渲染后 执行
  }
})

3.小程序index.wxml

(1)例子

（WXML 充当的就是类似 HTML 的角色）

<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>

(2) 数据绑定{{}}

• 数据绑定:

//index.wxml
<view>
	<text>{{msg}}</text>
</view>

//index.js
Page({
    data: {
        msg:"hello zhixing"
    }
})

• 属性绑定

<view class="container" data-name="{{name}}">
   <text>{{msg}}</text>
</view>

//index.js
Page({
    data: {
        msg:"hello zhixing",
        name:"Jake"
    }
})

• 条件渲染

<view hidden='{{flag?true:false}}'>
  hidden
</view>
//index.js
Page({
    data: {
        flag:true
    }
})

(3)列表渲染wx:for

• wx:for数组中各项的数据重复渲染该组件

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{{array}}">
  {{index}}{{item.name}}
</view>

Page({
  data: {
    array: [{
      name: 'chengchao',
    }, {
      name: 'jiangwei'
    }]
  }
})

• wx:for-item``wx:for-index

使用 wx:for-item可以自定义数组当前元素的变量名

使用wx:for-index可以自定义数组当前下标的变量名

<view wx:for="{{array}}" wx:for-item="myItem" wx:for-index="ind">
  {{ind}}{{myItem.name}}
</view>

• block wx:for渲染一个包含多节点的结构块

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>
//希望数据动态更新,给每一个节点,添加唯一的标识符加上wx:key
<view wx:for="{{array}}" wx:for-item="item" wx:key="index">
{{index}}{{item.name}}
</view>

(4)条件渲染wx:if

wx:if

<view wx:if="{{condition==1}}">
吃米饭
</view>
<view wx:elif ="{{condition ==2}}">
吃粥
</view>
<view wx:else>
不吃
</view>

Page({
	data:{
    	condition : Math.floor(Math.random()*3+1)
    }
 })

demo:
1.使用点击事件,实现图片切换

<image bindtap = "click" wx:if="{{show}}" src="/images/tab/ciwei.png"/>
<image bindtap = "click" wx:else src="/images/tab/ciwei_hl.png"/>

//js
Page({
  data: {
    show:false
  },
  click(){
    if(this.data.show){
      this.setData({
        show:false
      })
    }else{
      this.setData({
        show:true
      })
    }
  }
})

2.使用三元表达式

<image bindtap = "click"  src="{{show?'/images/tab/ciwei.png':'/images/tab/ciwei_hl.png'}}"/>

(5)模板引用

• WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用

//定义模板
<template name="temp">
  <view>
    <view>收件人：{{name}}</view>
    <view>联系方式:{{phone}}</view>
  </view>
</template>

//is使用模板
<template is="temp" data ="{{...item}}">
</template>

is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：

<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
	<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

• 引用

WXML 提供两种文件引用方式import和include。

• import 只引入template模板
  在 item.wxml 中定义了一个叫item的template

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

在index.wxml中引入

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

• include

include 可以将目标文件除了template,wxs 外的整个代码引入，相当于是拷贝到 include 位置

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>

(6)事件bindtap

JS 交互逻辑：点击触发

<view bindtap = "handleClick">{{hello wolrd}}<view>

Page({
    data: {
        msg:"hello world"
    },
    handleClick(){
        this.setData({msg:"change"})
    } 
})

4.小程序wxss样式

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改：

1.新增了尺寸单位。WXSS 在底层支持新的尺寸单位 rpx ，750rpx共。
2.提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
3.此外 WXSS 仅支持部分 CSS 选择器

5.交互逻辑 .js

(1)在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作 ：

点击 button 按钮的时候，我们希望把界面上 msg 显示成 "Hello World"：
<view>{{ msg }}</view> <button bindtap="clickMe">点击我</button>

Page({
  clickMe() {
    this.setData({msg: 'Hello World'})
  }
})

(2)index.js

import {http} from "../../utils/http"	//导入数据
Page({
  data:{		//data 是页面第一次渲染使用的初始数据
    movies:[],
    total:20,
    // 定义显示或者隐藏
    isShow:false
  },

  onLoad(){  //页面加载 执行
      http("top250",this.handleData);
  },
  onReachBottom(){  //上拉触发
    // console.log(1)
  },
  onPullDownRefresh(){	//下拉刷新
    // console.log(1);
    this.setData({
      movies:[]
    })
  }，
})

三.组件

1.简介

就像 HTML 的 div, p 等标签一样，在小程序里边，你只需要在 WXML 写上对应的组件标签名字就可以把该组件显示在界面上，例如，你需要在界面上显示地图，你只需要这样写即可：

<map></map>

简介。

API
为了让开发者可以很方便的调起微信提供的能力，例如获取用户信息、微信支付等等，小程序提供了很多 API 给开发者去使用。

要获取用户的地理位置时，只需要：

wx.getLocation({
  type: 'wgs84',
  success: (res) => {
    const latitude = res.latitude // 纬度
    const longitude = res.longitude // 经度
  }
})
调用微信扫一扫能力，只需要：

wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})
需要注意的是：多数 API 的回调都是异步，你需要处理好代码逻辑的异步问题。

2.toolbar的配置

toolbar的配置:

"tabBar": {
    //默认的颜色
    "color": "#666",
    //选择的颜色
    "selectedColor": "#3785F9",
    "position": "bottom",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "文章",
        //默认的图片
        "iconPath": "/images/tab/yuedu.png",
        //选择的图片
        "selectedIconPath": "/images/tab/yuedu_hl.png"
      },
      {
        "pagePath": "pages/movie/movie",
        "text": "电影",
        "iconPath": "/images/tab/dianying.png",
        "selectedIconPath": "/images/tab/dianying_hl.png"
      }
    ]
  }

3.动态设置导航

Page({
  onLoad(option){
    //不要onLoad中操作ui
    var type = option.type;
    this.setData({
       title:type
    })
  },
  onReady(){
    var self = this;
    wx.setNavigationBarTitle({
      title: self.data.title
    })
  }
});

4.数据加载loading

<loading hidden="{{loadingHide}}">
  加载中...
</loading>

//false显示加载,true表示不加载

5.下拉刷新

在需要下拉刷新的json文件中配置一下:
movie.json:

"enablePullDownRefresh":true

js:

//下拉刷新
  onPullDownRefresh(event){
     var refreshUrl = webUrl+this.data.type+"?start=0&count=20";
     //执行下拉先将数据清空
     this.data.movies=[];
     this.data.isEmpty = true;
     
     util.http(refreshUrl,this.callback);
     wx.showNavigationBarLoading();
  }

json:

"window": {
    "navigationBarBackgroundColor": "#405f80",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText":"小程序",
    //设置的拉下刷新的颜色
    "backgroundColor": "#333",
    "backgroundTextStyle": "dark",
    "enablePullDownRefresh": false
  },

6.地图

腾讯地图坐标拾取:(https://lbs.qq.com/tool/getpoint/)

wxml:

<map id="map" markers="{{markers}}" longitude="{{longitude}}" latitude="{{latitude}}" scale="25"  circles="{{circles}}" show-location="{{true}}" bindmarkertap="marker"></map>

json:

Page({
  data: {
    latitude:30.537094,
    longitude:114.333649,
    circles:[{
      latitude: 30.537094,
      longitude: 114.333649,
      fillColor:"#8DE25055",
      radius:30
    }],
    markers: [{
      iconPath: "/images/icon/map.png",
      latitude: 30.537094,
      longitude: 114.333649,
      width: 30,
      height: 30,
      title:"极客营科技",
      id:0,
      label:{
        content:"极客营科技有限公司",
        color:"#EE5E7B",
        borderWidth:1,
        borderColor:"#EE5E78",
        borderRadius:5,
        padding:5,
      },
      callout:{
        content:"极客营科技有限公司",
        color:"#EE5E7B",
        borderWidth:1,
        borderColor:"#EE5E78",
        borderRadius:5,
        padding:5,
      }
    }],
  },
  marker(){
    
  }
})

7.component（组件）

1.创建组件：

component(文件夹下)–>movieItem组件

//index.wxml下
<view class="container" bind:tap="handleDetail">
    <image  src="{{movie.imageUrl}}"></image>
    <text>{{movie.title}}</text>
    <view>评分<text>{{movie.average}}</text></view>
</view>

//index.wxss下修饰组件

2.定义组件:

//定义组件 index.json下
{
  "component": true,
  "usingComponents": {}
}

3.组件的属性和方法

// components/movieItem/index.js下
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    movie:{
      type:Object
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
  },
  /**
   * 组件的方法列表
   */
  methods: {
    handleDetail(){
      console.log(this.properties.movie);
      var id = this.properties.movie.id;
      wx.navigateTo({
        url: '/pages/detail/detail?id='+id
      })    
    }
  }
})

4.使用组件

(1)配置:

//在要引用组件的文件中的.json中配置
{
    "usingComponents":{
        "movie-item":"/components/movieItem/index"
    }
}

(2)在要引用组件的文件中的.js中处理逻辑和数据(略)

(3)在要引用组件的文件中的.wxml中使用组件

<view class="container">    
    <movie-item wx:for="{{movies}}" wx:key="{{index}}" movie="{{item}}"></movie-item>       
</view>

8.form搜索

<form bindsubmit="confirm">
     <view>
       <input type="text" confirm-type="search" name="search" bindconfirm="confirm"  />
     </view>
     <button formType="submit">提交</button>
 </form>

9.自定义事件的激活与监听

//wxml
//子组件
<view class="like" catchtap="onLike">
  <text>{{count}}</text>
</view>

.

//js
onLike(event){
      var like = this.properties.like;
      var count = this.properties.count;
      if(like){
        this.setData({
          like:false,
          count:count-1
        })
      }else{
        this.setData({
          like:true,
          count:count+1
        })
      }
      /* 自定义事件 */
      var behavior = this.properties.like?"like":"cancel";
      this.triggerEvent('like',{
        behavior
})

.

//父组件
<v-like bind:like="onLike"></v-like>

.

//js
onLike(e){
    console.log(e.detail);
 }