1.开发尺寸,屏幕适配：
美工按照： 375*667pt 来做 ： 4.7英寸 @2x iphone6/6s/7/8
开发按照： 375*667来下载图片即可, 单位rpx 1rpx=1pt, 小程序根据375*667自动
2.小程序构成：
单个Pager构成4个文件：
2.1. *.js： 数据更新，application相当于
MVVM体验：
data: {
msg:"点击我啊" // MVVM 中 data数据
},
MVVM修改数据：
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
2.2. *.wxml : View
-----wxml:的最外层标签,psge标签
界面显示数据 {{ msg }}
2.3. *.wxss : css，全集css配置
2.4. *.json : 数据
全局配置文件：
app.json ： 全局配置，比如 window 状态栏样式 ，pages 路由,第一条默认首页
3. 给控件添加点击事件：
事件冒泡：
冒泡事件：点击一个组件的事件触发时，该时间会向父节点传递
除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。
事件委托：
wxml:
<view class="mybtn" bindtap="clickMeShowMsg">
<text> {{ msg }} </text>
</view>
js:
Page({
clickMeShowMsg:function(){
wx.navigateTo({
url: '../index2/home',
})
}
})4. wxml 生命周期：
onLoad: function () {} 执行一次,数据加载,初始化
onHide:function(){}
onShow:function(){}, UI变化调用
onUnload:function(){ }, 页面销毁
5. Demo1 用户获取微信授权头像、名称
index.wxml 实现：
<!-- hasUserInfo:true 已经获取到用户信息
open-type="getUserInfo"： 微信开放能力
bindgetuserinfo="getUserInfo"： 获取到的用户信息
-->
<button wx:if="{{ !hasUserInfo }}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 点击获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar"
src="{{userInfo.avatarUrl}}"
mode="cover">
</image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>index.js实现:
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
userInfo: {},
hasUserInfo: false,
});
OnLoad:function(){
console.info("onload....");
let that=this;
wx.getSetting({
success(data){
// 获取用户属性的B方式
console.info(data.authSetting['scope.userInfo']);
if (data.authSetting['scope.userInfo']){
console.info("已经授权....")
that.setData({
isShowLogo:true
})
}else{
console.info("未授权....")
that.setData({
isShowLogo:false
})
}
},fail(data){
}
})
},
getUserInfo: function(e) {
if (app.globalData.userInfo){
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}else{
console.info("getUserInfo:")
console.info(e.detail.rawData)
if (e.detail.rawData) {
console.info("成功");
} else {
console.info("获取失败");
}
// 缓存,本地,避免调用
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
}效果图：
6. Demo2 实现数据列表、点击传值跳转详细
1. 定义 模板， 相当于ListView中的Item
1.1. 新建模板 pages/template/list_item.wxml
<!--坐标位置：pages/template/list_item.wxml-->
<!-- name 是模板的唯一标识，使用模板的时候通过 is="msgItem" -->
<template name="msgItem">
<!-- 列表Item -->
<view class="list_item">
<image class="list_item_avatar" src="../images/wechat.png"></image>
<view class="list_item_text">
<text class="list_item_time" >may 19 2018</text>
<text class="list_item_name">{{title}}</text>
</view>
</view>
</template>
pages/template/list_item.wxss
/* pages/template/list_item.wxss */
.list_item{
/* 设置弹性布局 */
display: flex;
/* 主轴方向是 水平 **/
flex-direction: row
}
.list_item_avatar{
width: 120rpx;
height: 120rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
.list_item_text{
display: flex;
/* 设置主轴 */
flex-direction: column;
/* 设置 主轴的对齐方式，垂直居中 */
justify-content: center;
margin-left: 20rpx;
}使用模板 home.wxml ：
<!-- 1. 引入模板, css 单独引入 在 wxss中 -->
<!-- 2. 使用模板 -->
<!--pages/index2/home.wxml-->
<!-- 1. 引入模板, css 单独引入 在 wxss中 -->
<import src="../template/list_item.wxml" />
<view>
<!-- 轮播图实现
实现委托：如果item要绑定事件，可以分别个item绑定事件，也可以使用事件委托
-->
<view>
<swiper indicator-dots="true"
autoplay="true"
catchtap="carouseToDetail" >
<block wx:for="{{listArr}}" wx:for-index="index" >
<swiper-item>
<view wx:if="{{ index==0}}" class="swiper-item-banner1" data-index="{{index}}"></view>
<view wx:else class="swiper-item-banner2"
data-index="{{index}}"></view>
</swiper-item>
</block>
</swiper>
</view>
<!-- 2. 使用模板 -->
<view wx:for="{{ listArr }}" catchtap="toDetail" data-index="{{index}}">
<template is="msgItem" data="{{...item}}"></template>
</view>
<!-- 测试 wx:for -->
<view wx:for="{{ listArr }}" >
{{index}}: {{item.title}}
</view>
</view>
/* 引入 模板对应的 home.wxss*/
@import '../template/list_item.wxss';
/* pages/index2/home.wxss */
/* 引入 模板对应的 wxss */
@import '../template/list_item.wxss';
.swiper-item-banner1{
background-color: #bfa;
width: 100%;
height: 100%;
}
.swiper-item-banner2{
background-color: rgb(44, 73, 167);
width: 100%;
height: 100%;
}1.3. home.wxml、home.wxss 本地数据加载，列表展示
list_data.js 数据
// 目录 /Pages/data/list_data.js 目录下
let list_data=[
{
title:"我是title1"
},
{
title:"我是title2"
}
];
// 暴露对象，ES5简写方式
module.exports= {list_data};
数据加载，列表显示home.js
// pages/index2/home.js
const list_datas_source= require('../data/list_data.js');
//获取应用实例
const app = getApp()
Page({
data: {
listArr:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 获取 数据
console.info(list_datas_source.list_data);
this.setData({
listArr:list_datas_source.list_data
});
},
// 点击listview 列表跳转
toDetail:function(event){
// 获取 data-index="{{index}}
// 触发事件元素放入 currentTarget 中
console.info(event.currentTarget.dataset.index);
wx.navigateTo({
url: "/pages/detail/detailPage?index=" + event.currentTarget.dataset.index
})
},
// 点击 轮播图跳转
carouseToDetail(event){
console.info(event);
// 事件委托， 值放在 target 中
console.info(event.target.dataset.index)
}
})1.4. 值传递、获取值
data-index="{{index}}" // home.wxml 设置属性
toDetail:function(event){ // home.js 拼接
// 获取 data-index="{{index}}
console.info(event.currentTarget.dataset.index);
wx.navigateTo({
url: "/pages/detail/detailPage?index=" + event.currentTarget.dataset.index
})
}
detailPage.js 获取值 通过options参数
Page({
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
/**
* wx.navigateTo({
url: "/pages/detail/detailPage?index=1"
})
*/
console.info("options:"+options.index);
}
})3. Demo3 水平滚动条实现时间委托传值
home.wxml 实现:
<view>
<!-- 轮播图实现
实现委托：如果item要绑定事件，可以分别个item绑定事件，也可以使用事件委托
事件委托： catchtap="carouseToDetail" 定义在swiper,分发给swip-item,
传递的值要在 data-index item中定义
-->
<view>
<swiper indicator-dots="true"
autoplay="true"
catchtap="carouseToDetail" >
<block wx:for="{{listArr}}" wx:for-index="index" >
<swiper-item>
<view wx:if="{{ index==0}}" class="swiper-item-banner1" data-index="{{index}}"></view>
<view wx:else class="swiper-item-banner2"
data-index="{{index}}"></view>
</swiper-item>
</block>
</swiper>
</view>home.js 实现：
Page({
// 点击 轮播图跳转
carouseToDetail(event){
console.info(event);
// 事件委托， 值放在 target 中
// 这里输出的是0 或者 1
console.info(event.target.dataset.index)
}
});
7. 基础api了解：
// 基础对话框， 在文档Api/界面/交互
wx.showToast({
title: '成功',
icon: 'none',
duration: 2000
});
// 在文档/api/数据缓存
// 存储数据
// wx.setStorageSync("username", "xiaoming");
var value=wx.getStorageSync("username");
console.info("value:"+value);
// 判断undefined、null与NaN,返回 undefined
if(!value){
console.info("不存在");
}else{
console.info("存在");
}8. tabBar 切换使用
/* pages加载顺序第一个需要pages下的第一个page路由节点,默认选中节点 */
/* 默认图标 iconPath */
/* 选择图标 selectedIconPath*/
app.json 配置如下：
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/one/one",
"pages/two/two"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json",
"tabBar": {
"list": [
{
"pagePath":"pages/index/index",
"text":"首页",
"iconPath":"/pages/images/wechat.png",
"":"/pages/images/wechat.png"
},
{
"pagePath": "pages/logs/logs",
"text": "动态",
"iconPath": "/pages/images/wechat.png",
"selectedIconPath": "/pages/images/wechat.png"
}
]
}
}9. 网络请求微信小程序：
index.js
//index.js
//获取应用实例
const app = getApp()
const MOVIE_URL ="http://api.m.mtime.cn/PageSubArea/TrailerList.api";
Page({
data: {
movieArr:[],
},
onLoad: function (options) {
let that= this;
// 发送网络请求
wx.request({
url: MOVIE_URL,
success(res) {
console.log(res.data.trailers.length)
that.setData({
movieArr: res.data.trailers
})
}
})
},
})
index.wxml
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<!-- 网络请求获取数据，遍历 -->
<view wx:for="{{movieArr}}" wx:for-index="idx" wx:for-item="item" >
{{ item.movieName }}
</view>
</view>
</view>