0基础初学者蹒跚学步，各位大佬绕行，右上角关闭。
想做一个小东西，至少得学会一些基础编程，例如变量，函数，方法，条件语句，循环语句啥的。
然后呢就可以进入小程序注册界面
https://mp.weixin.qq.com/wxopen/waregister?action=step1
注册成功之后呢，登陆，扫码，右上角有一个“文档”，然后就可以看到各种各样的介绍了
选择“文档”之后，点击开发，选择“小程序开发”，然后就能看到左边有一栏全是教你如何一步一步的了解小程序是什么东西，各种介绍就自己看吧。
学习这种东西，老师只能给你一个方向并不能手把手的教你实现所有的功能，这个时候我们想要开发一个东西，我们就按照自己的需求去看各种开发的文档，就例如上面的这些步骤。一种语言的各种方法各种函数，一个人不可能全部都完全掌握，只能达到非常熟练掌握其中经常用来工作的大部分方法功能。
如果不知道如何去实现一个功能，就在搜索引擎去打这几个关键字，然后把搜索到的各种英文方法和想要开发的语言和在一起形成新的关键字进行搜索，一开始完全看不懂他们在写什么，当你看的同类型的文章越多，你就越能理解他们写的东西是不是你想要的东西。
继续进入正题，选择“工具”，你就能看到微信web小程序开发工具的相关介绍，点击如图处
按照自己的系统选择软件下载（我比较推荐大家使用谷歌浏览器或火狐，虽然他们有个下载检测的机制很烦）
然后我们就来简单的做个新闻网页吧（其实是我的作业）
任意新建一个项目打开（认真阅读过文档的话，应该知道这些是什么了吧）
你会发现曾经见过的html,css变成了wxml( 微信ml 2333) wxss(我也不知道为什么看到就觉得搞笑)
我是有过了解静态网页开发的，如果大家不懂的话，建议先去看一下静态网页相关的知识
用法的话也差不多啦，view当div看
可是我只是略懂结构，并不熟练写CSS样式啊，所以我就去了官方UI复制了过来换上了我的功能。
在github选择下载官方UI的开发压缩包，导入的时候选dist文件夹
https://github.com/Tencent/weui
然后就能看到这个了
然后先导入官方的CSS文件到自己的项目，右键Style文件夹选择硬盘打开，复制这个文件到你的项目下，别忘了也创一个style文件夹
完成之后大概是这样
然后再app.wxss文件的开头import 's/weui.wxss';一下，路径位置别和我一样哦
然后我就选择表单，选择button看到了一个绿绿的按钮我很喜欢，于是在官方的那个文件夹里找到button,把对应的html结构复制到我自己的文档中
忘记说了，我在聚合申请了一个免费的新闻API，这个小程序做的是，点击一下按钮，请求一次新闻数据，然后显示在当前界面。等下我会细说。
现在我们已经有了一个按钮如上图，现在我们要把下面的新闻显示结构写好
我在官方的Panel找到了这个样式如下图
找到它的位置，并且复制到自己的项目中
然后我们就需要注意了，每次我们请求新闻API时他会返回30个新闻数据，而我们并不需要些30个结构，我们只需写一个结构。
这个navigator url通过阅读开发文档我们可知，我们可以赋值一个项目内的地址给URL在用户点击这个样式的时候实现跳转（我可能在后面的专栏里更新跳转新闻网页）
然后来讲这个{{item.数据}}这个结构
在这个index.wxml的对应index.js中，有一个data{}用来存放数据
当这个data是这样赋值时
data{
activeIndex: 0,
sliderOffset: 0,
sliderLeft: 0,
}
这里面的参数的值改变时{{item.变量}}的值就会改变，item是data中的项
我们把请求的json数据存在data里，然后wxml里的{{item.变量}}就会变成我们设置好的样子
但是我们有30个数据，我们只定义了一个结构，是因为我们用了，wx.for{{data}}这个方法，看上图，这个方法可以循环view这个结构渲染出来对应的数据形成列表，具体看开发文档吧。
现在来看js文件
const app=getApp()获取应用实例
我们在data中定义变量
我们的绿色button按钮后面跟着bindtap='send'这里就是触发send function
然后调用wx.request方法请求新闻api数据，url填写给的接口，一般是xxxxx/index，此时根据不同的公司的帮助文档在后面跟上请求的KEY，一般是在index?type='种类'&key='你的key’
但也有如图所示的阿里云买的聚合接口，在header中按这个格式输入appcode
然后我们在success返回的json数据res.data中进行微调，我们一开始得到的res.data是用console.log打印出来是这样的
这里面有很多结构，你要一点点的修改成最终的array（30）集合，不想浪费请求次数的话可以根据你买的api开发帮助的案例修改，按照我们这个json，修改结果就是，res.data.result.data
如果要获取title就是res.data.result.data.title
再回到上上副图，在console完之后我们用setdata方法给js里的data赋值，把整个res.data.result.data（30个数组）赋值给了list_data
其实此处的data中可以完全不写这个list_data
但是在wxml中要写好哪一个list_data
左边的绿色图片是box_thumb那么我们在后面的src路径改成{{item.thumbnail_pic_s}}
标题一是box_title我们就写{{item.title}} （这些是根据刚才的json修改的，不是乱写的）
完成修改后，我们点击上方的“编译”，点击绿色按钮，就完成了
源代码就贴在这了，反正也没什么东西
以下是index.wxml
以下是index.js
//index.js
//获取应用实例
const app = getApp()
Page({
data:{
list_data:null,
ahh:null,
},
//send
send: function () {
var that=this
wx.request({
url: 'http://toutiao-ali.juheapi.com/toutiao/index?type=top',
header: {
'content-type': 'application/json', // 默认值
'Authorization': 'APPCODE b761f54f357b47aebab49aa90a12d766'
},
success: function (res) {
console.log(res.data)
that.setData({
list_data: res.data.result.data,})}})}})
如果遇到格式有问题的话，右键空白区域格式化代码即可。
记得在app.json导入官方ui哦
今天就这样啦，以后再看什么时候心情好了。
项目在这里啦
链接: https://pan.baidu.com/s/1nb8f1VRV1fQUkhrjHkiZwg 提取码: 5v6f