初始微信小程序

最近，接触了一下微信小程序，并写了一个demo，现在就来说说在写的时候所遇到的坑。

微信小程序是由微信开发的一套有别于html、css的语言。但是它们的用法用法是非常的相似的，思想也是很相似。

如何使用

使用微信小程序开发需要使用微信开发一套工具，那就是微信web开发工具,这个开发工具专门用于微信小程序的开发。
申请一个微信小程序开发账号，注册地址,在这个地址进行注册，注册完进去之后，拿到开发的关键东西appId

其余细节

在这里提醒一下，可以选择使用普通模板而不是nodejs模板，点击穿件，就可以在里面写代码啦，在这里一开始，你们要做的事情就是分文件夹

初始微信小程序

你们就很明显的看出来，其实这是我比较喜欢的分法，大家也可以按照习惯来，这样子分的好处就是能清楚的看到哪些在什么的地方，一般请求我会写到一个额外的函数里面，需要的时候再引用，注意一开始的需要配置app.json那个文件，这个文件就相当于webpack中的入口的文件，相当于在这个文件中注册会在这个小程序中用到的页面，如果在这个文件里面没有注册，但是你却想跳转，这时候会报错，所以大家要注册，地址要正确，主要是没有后缀,看下列的代码就知道了。在pages中进行注册页面，而window的作用就是标题，可以理解为html页面的title，会在页面的顶部显示

{
  "pages":[
    "pages/index/index",
    "pages/log/log",
  ],
  "window":{
    "backgroundColor": "#fff",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "登录助手",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "仓库",
                "iconPath": "sources/image/Warehouse_normal.png",
                "selectedIconPath": "sources/image/Warehouse_selected.png"
            },
            {
                "pagePath": "pages/data/data",
                "text": "订单",
                "iconPath": "sources/image/Order_normal.png",
                "selectedIconPath": "sources/image/Order_selected.png"
            }
        ],
        "selectedColor": "#2bd356",
        "position": "buttom"
    }
}

这个红色框框框住的就是window的设置地方，而tabBar就会写在最底下，类似与淘宝网下面的那部分，能够多个页面进行跳转。

初始微信小程序

说了这么多，然后就说说wxml，这个格式的页面就是微信自主开发一种格式，里面用到最多的是view标签，这个标签会很有用，而block标签页很有用，而wxss和css也很相似，但是wxss最大的不同是，可以使用rpx，这是什么呢，rpx是微信开发的，也可以说是适用手机屏幕的一款计量单位，一个手机的宽度是750rpx无论是什么屏幕都不会改变，所以，这就很方便我们的使用了。

js的话其实就是和vue差不多，学过vue的很容易上手，但是唯一的区别就是，修改data的时候需要使用this.setData（{option}）这样子修改

page({
  data: {
    index: 1
  },
  changgeIndex: function () {
    this.setData({
        index: 2
    })
  }
})

这样子，就可以修改了数值。然后数据的各个页面进行传值，那么我觉得比较好的就是在app.js文件的globalData里面设置，这样子，需要的时候可以直接获取，也不会牵扯到页面上。其实你们也可以引用组建，这个需要你们利用import就好。而想绑定事件需要在wxml中用到bindtap属性，微信小程序就说到这了。

开发时可能需要的问题

在初始化的时候对多个接口进行请求，单手请求需要有先后顺序，

解决方法：使用promise对其编程异步方式，一旦请求成功再使用使用其他请求

制作右滑删除的时候需要利用autoflow：hidden属性，一般tounch属性对应的是你所按的那个dom节点，所以这个需要注意

如果有疑问可以看看微信小程序的文档,文档其实讲的很详细

在下不才，如果有什么问题可联系我的邮箱[email protected]

如何使用

其余细节

开发时可能需要的问题

相关推荐