微信小程序入门

一、小程序环境搭建与开发工具介绍

1.注册小程序

2.下载开发者工具

3.开发者工具介绍

二、微信小程序后台账号配置

1.APPID

2.域名管理

3.添加开发者权限

三、小程序页面起步--目录结构

四、页面设置

五、页面操作js

注册一个小程序App()--app.js

注册一个页面Page()--index.js

六、页面操作css--小程序自有单位rpx

1px = 2rpx

七、事件交互

<view bindtap="next">xxx</view>

八、页面交互

next(){

　　wx.navigateTo({

　　　　url: '../index/index?id=2',

　　　　success:function(){

　　　　}

　　})

}

onLoad: function(options){

　　var id = options.id;

　　console.log(id);//2

}

九、生命周期

https://www.cnblogs.com/Super-scarlett/p/9450845.html

1.小程序生命周期

2.页面生命周期

3.  以下内容你不需要立马完全弄明白，不过以后它会有帮助

十、小程序核心

1.数据绑定--模版语法

<view>{{msg}}</view>

Page({

  data: {

    msg: 'Hello World !'

  }

})

2.控制属性--模版语法

<view wx:if="{{length ==1}}"> 1 </view>=

<view wx:elif=“{{length ==2}}”> 2 </view>

<view wx:else> 3 </view>

Page({

  data: {

    length: 1

  }

})

3.列表渲染--模版语法

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item=“itemName">

  {{idx}}: {{itemName}}

</view>

Page({

  data: {

    array: [1,2,3,4,5,6]

  }

})

4.样式--模版语法

<view class=“colors {{colorType?’green’:’yellow’}}"> 样式颜色 </view>

<view style=“color:{{colorName}}> 字体颜色</view>

Page({

  data: { 

 colorType:true,

    colorName: “pink”

  }

})

5.事件的使用方式

<view wx:for="{{choose}}" wx:for-index="idx" wx:for-item="itemName" class="chooseitem {{idx==chooseIdx?'active':'' }} " data-id="{{idx}}" bindtap='chooseitem'>{{itemName.name}}</view>

Page({

　data: {

　　chooseIdx: 0,

　　choose: [{

　　　name: '是',

         active: true

　　},

      {

　　　name: '否',

         active: false

      }],

　},

  chooseitem(e) {

      console.log(e)

　　var id = e.currentTarget.dataset.id;

　　this.setData({

　　  chooseIdx: id

　　})

  }

})

6.import

import可以在该文件中使用目标文件定义的template，如：

<!-- item.wxml -->

<template name="item">

<view class="stepitem {{item.stepThis?'orange':''}}">

<view wx:if="{{item.gonext}}" class='gonext'> > </view>

<view class='top_num'>{{item.num}}</view>

<text class='top_msg'>{{item.msg}}</text>

</view>

</template>

在 index.wxml 中引用了 item.wxml，就可以使用item模板：

<import src="item.wxml"/>

<view class='topHeader'>

<block wx:for="{{steps}}" wx:for-index="idx" wx:for-item="item" wx:key="{{idx}}">

  <template is="item" data="{{item}}" />

</block>

</view>

js:

const utils = require('../../utils/util.js');

Page({ 

data: {

　　steps: utils.steps,

},

onLoad: function (option) {　

　　var _this = this;

　　var up1 = "steps[" + 1 + "].stepThis";　　　　

　　　　

　　_this.setData({

　　　　[up1]: true,

　　})

}

})

util.js:

const steps = [{

num: "①",

stepThis: true,

msg: "xxx",

gonext: true

},

{

num: "②",

stepThis: false,

msg: "xxx",

gonext: true

},

]

7.include:

 include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置，如：

<!-- index.wxml -->

<include src="header.wxml"/>

<view> body </view>

<include src="footer.wxml"/>

<!-- header.wxml -->

<view> header </view>

<!-- footer.wxml -->

<view> footer </view>

8.setData

所有数据的改动都必须使用setData

Page({

  data: { 

　　name: “weixin”

  }

})

this.setData({

　　name: “QQ”

})

tip:需要注意this的指向

十一、小程序文档阅读