https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN
注册邮箱:[email protected]
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
我的:wx006880ae481cff72
minapp
小程序助手
vscode weapp api
vscode wxml
vscode-wechat
WeApp Snippets
wechat-snippet
vscode-icons
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
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 脚本逻辑文件
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
栏的表现app.js:
小程序启动之后,在 app.js 定义的 App 实例的 onLaunch 回调会被执行:
App({
onLaunch: function () {
//监听
//小程序启动之后 触发
},
onShow: function () {
//浏览时触发
},
onHide: function () {
//关闭或隐藏时触发
}
})
page.js
Page({
data: { // 参与页面渲染的数据
logs: []
},
onLoad() {
// 页面渲染后 执行
}
})
(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>
{{}}
//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
}
})
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>
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.使用三元表达式
//定义模板
<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
。
item.wxml
中定义了一个叫item的template
<template name="item">
<text>{{text}}text>
template>
在index.wxml
中引入
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
include 可以将目标文件除了template,wxs 外的整个代码引入,相当于是拷贝到 include 位置
<include src="header.wxml"/>
<view> body view>
<include src="footer.wxml"/>
<view> header view>
<view> footer view>
bindtap
JS 交互逻辑:点击触发
{{hello wolrd}}<view>
Page({
data: {
msg:"hello world"
},
handleClick(){
this.setData({msg:"change"})
}
})
WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改:
1.新增了尺寸单位。WXSS 在底层支持新的尺寸单位 rpx ,750rpx共。
2.提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同,你可以写一个 app.wxss 作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss 仅对当前页面生效。
3.此外 WXSS 仅支持部分 CSS 选择器
(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:[]
})
},
})
就像 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 的回调都是异步,你需要处理好代码逻辑的异步问题。
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"
}
]
}
Page({
onLoad(option){
//不要onLoad中操作ui
var type = option.type;
this.setData({
title:type
})
},
onReady(){
var self = this;
wx.setNavigationBarTitle({
title: self.data.title
})
}
});
<loading hidden="{{loadingHide}}">
加载中...
loading>
//false显示加载,true表示不加载
在需要下拉刷新的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
},
腾讯地图坐标拾取:(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(){
}
})
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下修饰组件
//定义组件 index.json下
{
"component": true,
"usingComponents": {}
}
// 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
})
}
}
})
(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>
<form bindsubmit="confirm">
<view>
<input type="text" confirm-type="search" name="search" bindconfirm="confirm" />
view>
<button formType="submit">提交button>
form>
//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);
}