微信小程序入门
微信小程序 入门
一.概述
1.注册小程序账号
https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN
注册邮箱：[email protected]
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"
}
]
}
}
pages字段 —— 当前小程序所有页面路径列表。window字段 —— 全局的默认窗口表现， 所有页面的顶部背景颜色，文字颜色定义等。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>
<view wx:else>
不吃
view>
Page({
data:{
condition : Math.floor(Math.random()*3+1)
}
})
demo:
1.使用点击事件,实现图片切换
//js
Page({
data: {
show:false
},
click(){
if(this.data.show){
this.setData({
show:false
})
}else{
this.setData({
show:true
})
}
}
})
2.使用三元表达式
(5)模板引用
- WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用
//定义模板
<template name="temp">
<view>
<view>收件人：{{name}}view>
<view>联系方式:{{phone}}view>
view>
template>
//is使用模板
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
<template name="item">
<text>{{text}}text>
template>
在index.wxml中引入
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
- include
include 可以将目标文件除了template,wxs 外的整个代码引入，相当于是拷贝到 include 位置
<include src="header.wxml"/>
<view> body view>
<include src="footer.wxml"/>
<view> header view>
<view> footer view>
(6)事件bindtap
JS 交互逻辑：点击触发
{{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 写上对应的组件标签名字就可以把该组件显示在界面上，例如，你需要在界面上显示地图，你只需要这样写即可：
简介。
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);
}