1.先注册小程序账号，在设置--开发设置里有appid
----------------------------------------------------------------------------------------
2.安装开发者工具，根据自己的电脑系统安装
----------------------------------------------------------------------------------------
3.界面的一些设置
ctrl+p在下方调试是查找文件
ctrl+f查找文字
可以点击行数进行打断点，下一个断点F8和单步调试F10
带sm的是源文件，在这上面打断点
----------------------------------------------------------------------------------------
4.新建空白项目
新建app.js app.json app.wxss这3个都是必须的文件
新建一个项目pages/walcome/welcome.js
pages/walcome/welcome.wxml
pages/walcome/welcome.wxss
在welcome.wxml里写
<view>
<text>hello</text>
</view>
----------------------------------------------------------------------------------------
console调试会报错，在入口app.json文件里写入路径
{
"pages": [
"pages/welcome/welcome"
]
}
//写小程序一点点来，写一个空标签可能会报错：unexpected token, near `/>`
----------------------------------------------------------------------------------------
在welcome.js里写
Page({
})
否则会报错
----------------------------------------------------------------------------------------
5.welcome.wxml文件，文字放在text里面可以被手机选中复制
<view>
<text>welcome</text>
<image src="/images/a1.jpg"></image>
<text>hello，七月</text>
<view>
<text>开启小程序之旅</text>
</view>
</view>
//在小程序里用rpx，自适应，尽量不用px，设计时候让设计师用iphone6 750px设计，1:1的
----------------------------------------------------------------------------------------
6，无需引用css之类的文件
.container{
display:flex;/*弹性模型*/
flex-direction: column;/*列排序*/
align-items:center;/*弹性盒子居中*/
}
wxml里面用class
//ps：如需动态的引用样式，用style，如果不变，则用class
----------------------------------------------------------------------------------------
7，最外层有一层标签page，可以设置高度100%和全局背景
----------------------------------------------------------------------------------------
8，app.json第一个是入口文件(哪个写在第一个就默认显示哪个)，第二个是微信小程序头部颜色
{
"pages":[
"pages/posts/post",
"pages/welcome/welcome"
],
"window":{
"navigationBarBackgroundColor":"#b3d4db"
}
}
----------------------------------------------------------------------------------------
9，手机移动端的逻辑分辨率是pt，物理分辨率是px，一个pt可以由1个2个或者多个px组成，iphone6是375pt
iphone6物理像素750*1334为视觉搞进行设计，在小程序中使用rpx为单位
ip6下 1px = 1rpx = 0.5pt
ip6 plus 1px = 0.6rpx
使用rpx，小程序会在不同的分辨率进行转换，px不会
文字不太适合使用rpx
----------------------------------------------------------------------------------------
小程序wxml+js调用//注意：小程序没有DOM直接调用
<view>
<swiper indicator-dots="true" autoplay="true" indicator-color="rgba(255, 255, 255, 1)" indicator-active-color="red">
<swiper-item>
<image class="img1" src="/images/a1.jpg"></image>
</swiper-item>
<swiper-item>
<image class="img1" src="/images/a1.jpg"></image>
</swiper-item>
<swiper-item>
<image class="img1" src="/images/a1.jpg"></image>
</swiper-item>
</swiper>
</view>
<view>
<text>{{"hello" + title}}{{date}}</text>
</view>
<view>
<text>{{date}}{{title}}</text>
</view>
<view>
<image wx:if="{{img_condition}}" class="img2" src="{{img.post_img}}"></image>
</view>
<view>
<image class="img2" src="{{img.post_img1}}"></image>
</view>
<view>
<text>{{a+b+c}}</text>
</view>
js页面在小程序自带的开发工具打page可以自动生成//主要是调用方法
Page({
/**
* 页面的初始数据
*/
//data: {
//date:"Nov 18 2016",
//title:"正是虾肥蟹壮时"
//},
imgPath:"/images/...",
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//页面初始化options为页面跳转带来的参数
var post_content1={
date:"sep 18 2016",
title:"正是虾肥蟹壮时",
img:{
post_img:"/images/a1.jpg",
post_img1:"/images/a1.jpg"
},
a:1,
b:2,
c:3,
img_condition:true,
view_num:"112",
}
this.setData(post_content1);
},
})