小程序原生开发步骤讲解

前言：都在使用快速开发的uniapp框架的时候，我们是否忘记了原生小程序开发了呢，这里记录一下，以备日后查阅

1.打开小程序开发文档

开始 | 微信开放文档

账号可以不用申请用测试号我们主要讲解开发

2.安装开发者工具

3.创建小程序

4.目录结构：

目录结构和我们用uniapp编译之后的小程序目录结构一致，所以我们这里有所熟悉贴一张图

 5.全局配置

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

6.页面配置

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

7.常用写法避坑

属性绑定：

加{{}}

<checkbox checked="{{false}}"> </checkbox>

条件渲染：

<view wx:if="{{condition}}"> True </view>

 列表渲染：

data-index属性在我们绑定点击事件时，才可以拿到当前的index 索引，以及item项，

<view wx:for="{{array}}" data-index="{{index}}" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

双向绑定：

<input model:value="{{value}}" />

事件绑定：

<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>

事件这里和uniapp 有所不同就是携带参数这块 小程序bingtap事件有自己的回调参数，需要在回调的e节点属性里面去寻早对应信息

 class和style样式绑定：

class="content {{tabIndexd == index?'active':''}}"

 style="background:{{box.color}};font-size:{{box.fontSize}}"

 data变量赋值：

let newArray = this.data.imageList.concat(temp);
this.setData({
    imageList:newArray
})

这里赋值操作一定的是setdata，如果普通的 变量赋值那还简单，直接给属性赋值就行，很多时候我们拿到的数据需要拆分和组装，就需要根据情况变化，但最终都得执行setdata赋值，才能实现响应式喔，可能还有些小程序写法没有讲到，常用得基本都在这里了，应付一些小开发足以，谢谢大家观看，记得下次再来喔