微信小程序开发之基础指南

微信小程序近年来越发火热，类似一个小型的APP，但不需要注册和安装，直接通过微信平台即可使用；而对于开发者而言，其主要特点是简单和易上手，只要学过HTML、css和JavaScript的程序员，转微信小程序开发简直不要太容易，这里给出一个对于首次使用微信小程序开发平台开发的一些指南和小的注意事项。

各文件作用                

 

pages:用来存放显示的页面，包括首页和在首页进行点击跳转之后的页面都要放在这里。

index:就是pages里面的页面，这里指首页，里面有4个文件，分别来说一下他们的意义

• js: 定义wxml页面需要显示和用到的data数据，以及和wxml进行交互的函数。
• json:  对当前页面的背景、导航栏文字等进行页面设置
• wxml:  类似于HTML，面编写<view></view>这些显示组件
• wxss:  对wxml里的组件的样式（class属性）进行设置，包括字体、边框、颜色、大小、位置等，类似于css，

utils.js：里面放置了一些公共的函数

三个App文件：是对一些全局特征和页面进行一些设置和编辑，需要指出的是APP.json文件

（1）里面的内容要用有一个 { } 包起来，所有内容都要写在这个 { } 中

（2）pages是页面路径的索引，所有创建的页面都要在这里留下路径

在一个js文件中引入另一个js文件

直接给代码

（1）首先写一个js文件

//pages/data/newsdata.js 

//定义数组 newsdata
var newsdata=[
  {
    "author_name": "iwen",
    "author_time": "2019/4/28",
    "title": "百度起诉今日头条",
    "news_intro": "4月26日，第一财经记者获悉，今日头条（北京字节跳动科技有限公司）被百度以不正当竞争为由起诉到北京市海淀区人民法院，要求字节跳动立即停止侵权，赔偿相关经济损失及合理支出共计人民币9000万元，并连续30天在其APP及网站首页道歉。除民事起诉外，百度也同时向法院提交了行为禁止保全申请书",
    "like_count": 20,
    "comment_count": 15
  } 
]

//module.exports的作用是导出给其他文件能使用
module.exports={
  //把内部newsdata变量赋给外部newsdata，在外部使用时，相当于直接调用内部newsdata
  newsdata:newsdata
}

（2）在和news.js文件里引用newsdata.js

// pages/news/news.js
//引用刚刚写的js文件
var newsdata=require("../data/newsdata.js");

Page({
  /**
   * 页面的初始数据
   */
  data: {
    indicatordots: true,
    _autoplay: true,
    _crcular: true,
    _interval: 5000,
    title: "百度起诉今日头条"
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //把外部js文件的数据加入到data里
    this.setData({
      newsdata: newsdata
    })
  },

（3）在news.wxml中使用数据，类似如下：

<text class="author-name" >{{newsdata.newsdata[0].author_name}}</text>

我们的使用是在后面的{{}}中，第一个newsdata代表newsdata.js文件（相当于在newsdata中使用this），第二个newsdata代表newsdata.js中的newsdata数组，整个语句相当于在newsdata.js中使用this.newsdata[0].author_name。或者：

this.setData({
      newsdata: newsdata.newsdata
    })

这样在使用是时候直接按照下面使用即可

<text class="author-name" >{{newsdata[0].author_name}}</text>

使用<wxs />引用外部wxs文件

//tab_data.wxs
var tab2_data=[
  {
    id: 14061111,
    name: "chenyongsen"
  }
]

module.exports={
  tab2_data: tab2_data
};

<!--pages/tabBar2/tabBar2.wxml-->
<wxs src='../data/tab2_data.wxs' module='tab2_data' />
<view class="tabBar2-container"> 
<view class="btn">
    <text>{{tab2_data.tab2_data[0].id}}</text>
</view>
  <image class="logo" src="{{path}}"></image>
</view>

搞定，和引入js文件的区别就是不用在.js文件中使用require引入外部js文件，直接在wxml上操作。