小程序
2017-08-15 本文已影响0人
skymcl
git使用
廖雪峰的官网
https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000
克隆项目：git clone "目标仓库"
1、创建版本库：cd到项目目录下执行 git init
2、查看一下状态：git status
3、添加到版本库：git add .
4、提交说明：git commit -m "some message"
5、更新：git pull
6、提交： git push
7、撤销修改：git checkout .
8、提交记录：git log
9、版本回退： git reset --hard 3628164
10、回退到上一个版本：git reset --hard HEAD^
11、查看所有分支 git branch -a
12、查看当前所在分支 git branch
13、创建并切换分支 git checkout -b dev
14、合并分支 git checkout master git merge dev
15、删除分支 git branch -d dev
flex布局
Flex 布局教程：语法篇
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
Flex 布局教程：实例篇
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
目录结构
文件结构
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/structure.html
注册页面
注册页面
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html
常用方法
data() 页面的初始数据
onShow() 监听页面显示
setData() 参数格式接受一个对象，以 key，value 的形式表示将 this.data 中的 key 对应的值改变成 value。
路由
页面路由
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/route.html
路由跳转页面
https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html
wx.navigateTo({
url: '../identify/identify'
})
事件处理函数
事件处理函数
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html
点击事件
bindtap()
传参获取跳转
设置参数名data-title:
<view bindtap="toDetail" data-title="hello">
toDetail:function(e){
var gettitle=e.currentTarget.dataset.title;（获取传过来的参数）
带参数跳转：
wx.navigateTo({
url:"../detail/detail?title="+gettitle
})
}
获取传递的参数
Page({
data:{
title:''
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
this.setData({
title:options.title
})
},
})
点击获取分类信息切换背景
绑定切换id
<view class="classify-left-list {{touchId == item.id ? 'classify-touch' : ''}}" data-classifyId="{{item.id}}" bindtap="getClassList">
// 获取分类下的课程
getClassList: function (event) {
let that = this;
var classId = event.currentTarget.dataset.classifyid;
util.myrequest({course_class_id: classId},'/course/class/and/price/info','POST',function (res) {
if(res.result) {
that.setData({
price: res.datas.price,
course: res.datas.course,
touchId: classId
})
}else{
// console.log(res.result);
}
})
},
传递对象
传递：
var arr = {
courseTitle: courseTitle,
courseId: courseId
};
wx.navigateTo({
url: "../detail/detail?title=" + JSON.stringify(arr)
})
获取：
onLoad: function(options) {
let that = this;
let str = JSON.parse(options.title);
let courseId = str.courseId;
this.getDetail(that, courseId);
wx.setNavigationBarTitle({
title: str.courseTitle
})
},
模块化
模块化
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/module.html
（util文件）
1、定义方法
function firstLogin() {}
2、导出方法
module.exports = {
firstlogin: firstLogin,
}
3、引入方法
var util = require('../../utils/util.js');
4、使用方法
util.firstlogin();
请求接口
发起请求
https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html#wxrequestobject
例子
wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
data: {
x: '' ,
y: ''
},
header: {
'content-type': 'application/json'
},
success: function(res) {
console.log(res.data)
}
封装方法
function myrequest(data, path, method, cb) {
wx.request({
url: path,
header: { 'content-type': 'application/x-www-form-urlencoded' },
data: data,
method: method,
success: function(res) {
if (typeof cb == "function") {
cb(res.data);
}
},
// 登入失败
fail: function() {
wx.showModal({
title: '警告',
content: '网络异常！',
success: function(res) {
if (res.confirm) {
// console.log('用户点击确定')
}
}
})
},
})
}
使用封装的方法请求接口
util.myrequest('', '/home/title ', 'GET', function(res) {
if (res.result) {
e.setData({
title: res.datas
})
}
})
动态获取图片宽高适应屏幕
// 设置轮播图自适应高度
function imageLoad(e, that, w) {
wx.getSystemInfo({
success: function(res) {
var widths = res.windowWidth; //屏幕宽度
let originalWidth = e.detail.width;
let originalHeight = e.detail.height;
var lunboimg = widths * w / 2.35
that.setData({
lunboimg: lunboimg
})
}
})
}
// 精品课程宽高比16:9
function autoheight(e, that, x, y, z) {
//获取图片的原始宽度和高度
wx.getSystemInfo({
success: function(res) {
var autowidth = res.windowWidth; //屏幕宽度
var swiperHeight = (x * autowidth * y) / z
that.setData({
imgheight: swiperHeight
})
}
})
}
.js文件中使用方法
// 轮播图2.35：1
getImgHeight: function(e) {
var that = this;
util.imgauto(e, that, 1)
},
// 获取轮播图
getLunbo: function(e) {
var that = this;
util.myrequest('', '/carousel/info', 'GET', function(res) {
if (res.result) {
e.setData({
reImg: res.datas
})
}
})
},
.wxml中使用
<!-- 轮播图 -->
<view style="height:{{lunboimg}}px!important;">
<swiper indicator-dots="{{indicatorDots}}" style="height:{{lunboimg}}px!important;" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
<block wx:for="{{reImg}}" wx:key="{{reImg}}">
<swiper-item data-port="1" data-courseTitle="贝斯塔" data-courseId="{{item.url}}" bindtap="toDetails">
<image bindload="getImgHeight" style="height:{{lunboimg}}px!important;" src="http://beisita.anasit.com:8888{{item.image}}" />
</swiper-item>
</block>
</swiper>
</view>
<!-- 轮播图结束 -->
判断登陆
https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html#wxloginobject
// 第一次使用小程序调用登录注册信息
// 是否是第一次注册
function firstLogin() {
let that = this;
wx.checkSession({
success: function() {
//session 未过期，并且在本生命周期一直有效
wx.login({
success: function(res) {
// console.log(res.code)
if (res.code) {
var code = res.code;
that.myrequest({ code: code }, '/user/come/again', 'POST', function(res) {
if (res.result) {
wx.setStorageSync('account', res.datas.account);
wx.setStorageSync('token', res.datas.token);
} else {
wx.navigateTo({
url: '../identify/identify'
})
}
})
} else {
console.log('获取用户登录态失败！' + res.errMsg)
}
}
})
},
fail: function() {
//登录态过期
wx.login({
success: function(res) {
if (res.code) {
var code = res.code;
// console.log(code);
that.myrequest({ code: code }, '/user/come/again', 'POST', function(res) {
if (res.result) {
} else {
wx.navigateTo({
url: '../identify/identify?code=' + code
})
}
})
} else {
console.log('获取用户登录态失败！' + res.errMsg)
}
}
})
}
})
}
// 检查是否有token account
function checklogin() {
console.log('token')
var token = wx.getStorageSync('token');
if (!token) {
wx.navigateTo({
url: '../identify/identify'
})
}
}
改名
上线前可以改两次
上线后不可改名
结构
下载
懒加载
封装模块化
路由
传叁（多叁数）
接收参数
数据处理(this.setData)
图片宽高比
微信端和手机端绑定账号数据打通
flex布局
image背景图
margin->padding ios样式错乱
absolute定位
