微信小程序新人入坑指南

微信小程序新人入坑指南

微信小程序的开发以“页面”为单位，每个页面由四个文件共同构建，分别以wxml、wxss、js和json为文件后缀名

• wxml：对标前端开发中的html文件，区别仅在于某些组件的名称和默认格式，书写格式并没有太大差别。
  对于wxml文件，控制组件大小的单位通常是rpx而不是px。当然后者也不是不能用，因为px是绝对像素单位，rpx是相对像素单位，使用rpx移动端开发上适配更方便
  如：

  <!-- HTML -->
  <div class="list">
    <div class="item">
        内容
        <input name="username"/>
    </div>
  </div>
  

  <!-- WXML -->
  <view class="list">
    <view class="item">
        内容
        <input name="username"/>
    </view>
  </view>
  

• wxss：对标前端开发中的css文件，几乎无任何区别。增添了一些组件的属性和格式限制，比如由于微信小程序本身环境默认样式的制约，button组件无法在wxss中使用类选择器进行样式上的改变，只能在wxml文件中进行属性的设置或样式的设置
  如：

    <button type="submit" 
            style="weight:200rpx;text-align:left"
            class="button">
            submit
    </button>
  

  /* 以下代码对于wxss无用 */
  .button{
    weight: 200rpx
    text-align:left
  }
  

• js：就是前端开发中的js文件，用于书写javascript文件。最基本的泛变量类型、连续赋值格式、函数定义、json对象赋值等基本语法没有变，但是需要根据微信开发文档找到微信官方提供的开放接口才能完成更高级的操作，如事件绑定、页面跳转等。

    // pages/center.js
    var app = getApp(); // 获取app的全局变量，后面用于获取全局变量中存储的用户信息
    Page({
  
        /**
        * 页面的初始数据
        */
        data: {
            user: null
        },
  
        // 登录按钮绑定的函数
        onLogin: function (e) {
            var self = this; // 由于this指针的指向性局限，比如在这段代码中，如果在success的回调函数中直接使用this，将会绑定到回调函数本身中，而不是外部相关数据，因此需要在外面留一个self来充当回调函数中的this指针
  
            // 微信官方接口，
            wx.getUserProfile({
                desc: '用于完善用户信息',
                // 获取用户授权成功后的回调函数，是异步的
                success(res) {
                    let nickName = res.userInfo.nickName;
                    let avatarUrl = res.userInfo.avatarUrl;
                    // 微信官方接口
                    wx.login({
                        // 获取用户code成功后的回调函数，是异步的，后面其实还有个失败后的回调，可以不写
                        success: (res) => {
                            if (res.code) {
                                self.setData({
                                    user: {
                                    openid: 1, // 这里的openid是假数据，应该将上面的res.code用http request去请求发送到后端服务器，后端服务器向微信索要openid返回进行设置即可
                                    nickName: nickName,
                                    avatarUrl: avatarUrl
                                    }
                                })
                                // 存入缓存 微信提供的接口
                                wx.setStorageSync('user', self.data.user)
                                // 存入全局变量
                                app.globalData.user = self.data.user
                                /*
                                 * 全局变量在app.js中，默认变量对象名为globalData，如上，需要提前global中设置一个user变量为null的初始值，否则会报错，示例代码如下
                                 * globalData: {
                                 *  user: null
                                 * }
                                 */
                            }
                        }
                    })
                },
                // 获取用户授权失败后的回调函数，是异步的
                fail(err){
                    console.log(err)
                }
  
            })
        },
  
        toElders: function (e) {
            // 页面跳转接口（无法跳转到tabar页面，需要使用wx.switchTo()接口
            wx.navigateTo({
            url: '/elders/list/list',
            })
        },
  
        toHitstory:function(e){
            console.log("进入已报案件界面")
        },
  
        exit: function (e) {
            this.setData({
            user: null
            })
            // 清除缓存
            wx.clearStorageSync("user")
            // 清除全局变量
            app.globalData.user=null
        },
  
  
        // 以下的函数都是默认提供的监听器，可以删掉，但是如果要使用监听器功能函数名和函数格式必须和默认的完全一样
  
        /**
         * 生命周期函数--监听页面加载
        */
        onLoad(options) {
  
        },
  
        /**
         * 生命周期函数--监听页面初次渲染完成
        */
        onReady() {
            let user = app.globalData.user;
            if(user){
            this.setData({
                user:user
            })
            }
        },
  
        /**
         * 生命周期函数--监听页面显示
        */
        onShow() {
  
        },
  
        /**
         * 生命周期函数--监听页面隐藏
        */
        onHide() {
  
        },
  
        /**
         * 生命周期函数--监听页面卸载
        */
        onUnload() {
  
        },
  
        /**
         * 页面相关事件处理函数--监听用户下拉动作
        */
        onPullDownRefresh() {
  
        },
  
        /**
         * 页面上拉触底事件的处理函数
        */
        onReachBottom() {
  
        },
  
        /**
         * 用户点击右上角分享
        */
        onShareAppMessage() {
  
        }
    })
  

• json：对本页面进行相关配置的文件，json字符串格式，一般在页面开发的时候不会用到，但是在全局配置的时候需要大量用到，比如配置tabar页面路径，或者小程序全局页眉页脚的风格。

总之，微信小程序的开发较为简单，上手十分快速，最难的也不过是页面之间进行传参，或进行数据绑定，但对于初学者来说，先使用“死数据”进行页面的搭建和美化，最能有正向的积极反馈效果；想要更近一步或实现更缤纷的效果，可以使用“假数据”练习数据绑定和参数传递；对于没有能力负担微信云服务或没有条件部署一个服务器的朋友们，可以使用Node.js中，npm环境下下载json-server模拟服务器数据库，开启json-server服务后可以使用本地端口发送http请求，模拟前后端进行数据传递，甚至可以模拟搭建出一个json数据库。

最后，希望各位码途顺利！阳光很好，bug很少！！！