原生微信小程序开发--项目搭建与常用语法

1.下载微信开发者工具。点击进入下载地址 选择稳定版，安装好之后，开始创建项目。
2.新建项目，AppID需要到微信小程序公众平台上注册后才能获取。也可先用测试号创建。

3.了解项目结构，pages下可以看到默认创建的index文件夹，里面包含.js，.wxss，.json，.wxml 四个不同后缀的文件。.js写逻辑，wxss写样式，json做配置(比如想单独给该页面设置下拉，就需要在这里单独配置enablePullDownRefresh，如果想做全局配置需要在下面app.json中设置。)，wxml是页面文件。pages下面的app.js为全局JS。在该JS中定义的方法可在项目中的其他地方通过app.方法名获取。app.wxml为全局样式。

4.创建页面，右键项目文件夹，选择创建page的时候，会在该文件夹下生成js,json.wxml,wxss四个文件。选择创建目录的时候，会在该文件夹下生成一个子文件夹。四个文件会在子文件夹中。

app.json中同时会生成创建的文件地址。同样直接填写地址，会根据地址生成文件。

5.接下来配置一下底栏，一般的小程序都是有底栏的。

在app.json的{}中加入下面的代码：

"tabBar": {
    "color": "#878787",
    "selectedColor": "#000",
    "borderStyle": "black",
    "backgroundColor": "#fcfcfc",
    "list": [
      {
        "pagePath": "pages/home/home",
        "iconPath": "/image/tab_ico_home_nor2.png",
        "selectedIconPath": "/image/tab_ico_home_pe2x.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/XiaoQu/XiaoQu",
        "iconPath": "/image/tab_ico_myhood_nor.png",
        "selectedIconPath": "/image/tab_ico_myhood_nor2.png",
        "text": "页面2"
      },
      {
        "pagePath": "pages/XueXi/XueXi",
        "iconPath": "/image/tab_ico_study_nor.png",
        "selectedIconPath": "/image/tab_ico_study_nor2.png",
        "text": "页面3"
      }
    ]
  },

list中的pagePath是点击对应按钮跳转的页面路径，iconPath和selectedIconPath分别为选中和未选中的图标。

6.接下来就可以进行编码了，原生微信小程序页面中，块级元素标签使用<view></view>代替h5中的<div></div>标签，行级元素使用<text></text>代替h5中的<span></span>标签。开发思想接近VUE“数据驱动视图”的思想。同样支持组件化开发。

（1）js在创建完毕之后，会在page中自动生成一些常用的生命周期函数。比如onLoad监听页面加载，onShow监听页面显示。常常在页面初始化渲染数据的时候，使用这两个函数。除此之外，自定义的方法也要在page中定义。

（2）数据渲染，将要渲染的数据变量声明在js文件的data集合中

页面中使用 {{ }}

页面渲染出来了

如果要将初始值进行修改操作，需要使用setData方法

this.setData({
    homeFont: '你好！这里是首页！',
})

我在页面中定义了一个按钮。当在点击按钮时候，将数据进行修改。例：


这样，当点击按钮时，homeFont的值便修改成功了！注意在自定义方法结尾，要加上”,“不然会报错。button中的bindtap事件等同于h5中的onclick事件。

（3）常用页面跳转使用：

wx.navigateTo({
  url: "/pages/XueXi/details/details?contentId=" + contentId + "&titleName=" + titleName,
})

url中是需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。在跳转到的页面中的onLoad中接收传过来的参数。

 onLoad: function (options) {
    console.log(options);
  },

（4）数据缓存有多种方法，例如wx.setStorage或wx.setStorageSync。后者是前者的同步执行版本。

	存储：wx.setStorageSync('key', 'value');
	获取：wx.setStorageSync('key');

（5）数据请求：

    wx.request({
      url: 'test.php', //仅为示例，并非真实的接口地址
      data: {},//请求的参数
      method: 'POST',
      header: {
        'Content-Type': 'application/json'
      },
      success(res) {
      	console.log("请求成功回调！")
        console.log(res.data);
      },
      fail(e) {
      	console.log(”请求失败回调！“)
        callback(e);
      }
    })

更多的方法请参考：微信开放文档

组件的创建与使用，可以看我的另一篇博客。