wechat-newsapp
 
 
 
简介：这是一个新闻客户端的小程序版本，当然不能跟网易、腾讯之类的新闻客户端相比，这只是一个比较简易的版本。
 
 
注：11月3日微信已经开始了小程序的公测，所以下面的IDE破解过程可以省略。
demo的源代码已经上传到github，地址：https://github.com/xianyanbu/wechat-newsapp
 
演示效果如下
 
​ 
 
IDE的破解安装
 
由于微信小程序现在属于内测阶段，所以还没有正式的版本开放给所有的开发者，所以想要体验小程序的开发只能使用破解版的客户端。
 
详情请见https://github.com/gavinkwoe/weapp-ide-crack/。
 
里面有详细的破解安装过程，这里就不再赘述了，破解完成导入项目即可。
 
首页
 
 
 
一些组件和框架的详细使用方法参见微信小程序开发文档
 
 
效果
 
 
 
 
 
按照新闻所述领域和性质显示新闻列表，如，【头条】、【科技】等
 
 
页面头部
 
<view class="top-bar">
    <view class="top-bar-item" id="top" catchtap="onTapTag">头条</view>
    <view class="top-bar-item" id="shehui" catchtap="onTapTag">社会</view>
    <view class="top-bar-item" id="guonei" catchtap="onTapTag">国内</view>
    <view class="top-bar-item" id="guoji" catchtap="onTapTag">国际</view>
    <view class="top-bar-item" id="yule" catchtap="onTapTag">娱乐</view>
    <view class="top-bar-item" id="tiyu" catchtap="onTapTag">体育</view>
    <view class="top-bar-item" id="junshi" catchtap="onTapTag">军事</view>
    <view class="top-bar-item" id="keji" catchtap="onTapTag">科技</view>
    <view class="top-bar-item" id="caijing" catchtap="onTapTag">财经</view>
    <view class="top-bar-item" id="shishang" catchtap="onTapTag">时尚</view>
  </view>
 
 
 
catchtap类似于onclick，点击触发onTapTag事件，加载对应类别的新闻列表。
 
 
新闻列表
 
<scroll-view class="posts-list" style="height:100%" scroll-y="true">
    <block wx:for="{{postsList}}">
      <view class="posts-item" index="{{index}}" id="{{item.url}}" catchtap="redictDetail">
          <image class="author-avatar" src="{{item.thumbnail_pic_s}}"></image>
        <view class="posts-title">{{item.title}}</view>
        <view class="author">
          <view class="author-name">{{item.author_name}}</view>
          <view class="posts-last-reply">{{item.last_reply_at}}</view>
        </view>
      </view>
    </block>
  </scroll-view>
 
wx:for
 
在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
 
默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item
 
<view wx:for="{{items}}">
  {{index}}: {{item.message}}
</view>
 
block wx:for
 
因为wx:for 是一个控制属性，需要将它添加到一个标签上。但是如果我们想一次性操作多个组件标签，我们可以使用一个`标签将多个组件包装起来，并在上边使用wx:for`控制属性。
 
注意： block并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
 
新闻详情页
 
 
 
点击新闻后触发redictDetail事件跳转到详情页。
 
 
效果
 
 
新闻标题
 
<view class="detail-post">
    <view class="detail-post-header">
      <view class="detail-post-title">{{ detail.title }}</view>
    <view class="detail-post-meta">
      <view class="detail-post-info">
        <view class="detail-post-time">{{ detail.src }}</view>
      </view>
    </view>
    </view>
 
新闻内容
 
<view class="detail-post-content" wx:for="{{detail.item}}">
      <text class="content-info" index="{{index}}" wx:if="{{item.type == 'text'}}">{{ item.content }}</text>
      <image class="content-info" index="{{index}}" wx:elif="{{item.type == 'img'}}" src="{{item.content}}"></image>
</view>
 
wx:if
 
用wx:if="{{condition}}"来判断是否需要渲染该代码块：
 
<view wx:if="{{condition}}"> True </view>
 
用wx:elif和wx:else来添加一个else块，如：
 
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
 
获取新闻列表
 
http请求，wx.request(OBJECT)使用方法
 
​ wx.request发起的是https请求。一个微信小程序，同时只能有5个网络请求连接。
 
OBJECT参数说明：
 
参数名
类型
必填
说明
url
String
是
开发者服务器接口地址
data
Object、String
否
请求的参数
header
Object
否
设置请求的header , header中不能设置Referer
method
String
否
默认为GET，有效值：OPTIONS,GET,HEAD,POST,PUT,DELETE,TRACE,CONNECT
success
Function
否
收到开发者服务成功返回的回调函数，res = {data:”开发者服务器返回的内容”}
fail
Function
否
接口调用失败的回调函数
complete
Function
否
接口调用结束的回调函数（调用成功、失败都会执行）
 
示例代码：
 
wx.request({
  url: 'test.php',
  data: {
     x: '' ,
     y: ''
  },
  header:{
      "Content-Type":"application/json"
  },
  success: function(res) {
     var data = res.data;
  }
});
 
 
 
这里使用了聚合数据提供的免费新闻API–新闻头条，通过http请求获取新闻列表。
 
 
请求示例：http://v.juhe.cn/toutiao/index?type=top&key=APPKEY
 
返回结果示例：(json格式)
 
{
    "reason": "成功的返回",
    "result": {
        "stat": "1",
        "data": [
            {
                "title": "巫山云雨枉断肠：女摄影师Erika Lust记录的性爱",/*标题*/
                "date": "2016-06-13 10:31",/*时间*/
                "author_name": "POCO摄影",/*作者*/
                "thumbnail_pic_s": "http://09.imgmini.eastday.com/mobile/20160613/20160613103108_7b015493398e7fd13dda3a5c
e315b1c8_1_mwpm_03200403.jpeg",/*图片1*/
                "thumbnail_pic_s02": "http://09.imgmini.eastday.com/mobile/20160613/20160613103108_7b015493398e7fd13dda3a5ce315
b1c8_1_mwpl_05500201.jpeg",/*图片2*/
                "thumbnail_pic_s03": "http://09.imgmini.eastday.com/mobile/20160613/20160613103108_7b015493398e7fd13dda3a5ce315
b1c8_1_mwpl_05500201.jpeg",/*图片3*/
                "url": "http://mini.eastday.com/mobile/160613103108379.html?qid=juheshuju",/*新闻链接*/
                "uniquekey": "160613103108379",/*唯一标识*/
                "type": "头条",/*类型一*/
                "realtype": "娱乐"/*类型二*/
            },
...]}}
 
 
 
在这个demo里，当页面第一次加载或者点击切换新闻列表时，会发起http请求获取新闻列表。
 
 
发起请求
 
wx.request({
      url: Api.getNewsList(data),
      success: function (res) {
          console.log(res);
        self.setData({
          postsList: self.data.postsList.concat(res.data.result.data.map(function (item) {
            item.last_reply_at = util.getDateDiff(new Date(item.date));
            return item;
          }))
        });
        setTimeout(function () {
          self.setData({
            hidden: true
          });
        }, 300);
      }
    });
 
获取新闻详情
 
 
 
由于聚合数据提供的API返回的只是新闻列表，以及新闻指向的具体URL。没有提供接口返回某条新闻的具体内容。而且微信小程序目前没有webview，无法直接跳转到对应的新闻地址。所以，如果我们想要将数据呈现出来，必须要对获取的网页内容进行切割，抓取我们需要的数据，进行渲染。
 
 
获取网页内容
 
在获取数据列表的时候，有每条新闻具体指向的URL地址。通过http请求该地址，即返回网页的内容（字符串形式）。请求方法和获取列表的方法一样，使用wx.request(OBJECT)。
 
内容切割
 
这部分内容只是一些字符串的操作，不必深究。
 
 
 
数据请求和内容切割的代码如下：
 
 
  wx.request( {
      url: Api.getNewsByUrl( id ),
      success: function( res ) {

        var arrContent = [];

        var tmpStr = res.data;
        var doSearch = true;//循环控制

        //object 获取整篇文章的图片和文字段落数量
        var allText = res.data.match( /(<p class="section txt">).*(?=\<\/p\>)/ig );
        var allImg = res.data.match( /(<a class="img-wrap").*(?=\<\/a\>)/ig );
        var allContentNum = allText.length + allImg.length;
// 获取新闻标题
        var title = tmpStr.match( /(<h1 class="title">).*(?=\<\/h1\>)/ig )[ 0 ].replace( '<h1 class="title">', '' );
        // 获取文章来源
        var srcInfo = tmpStr.match( /(<span class="src">).*(?=\<\/span\>)/ig )[ 0 ].replace( '<span class="src">', '' ).replace( '&nbsp;&nbsp;&nbsp;&nbsp;', ' ' );

        var contentType = null;//接收内容的类型，文字或图片
        var text = {};
        var img = {};

        while( doSearch ) {

          var tmpObj = {
            'type': null,
            'content': null
          };
          // console.log( tmpStr );

// 注：这里的正则表达式，跟上面的正则基本是一样的，只是在最后少一个g属性，加上g表示获取所有符合条件的数据，不加g表示获取第一个符合条件的数据
// 截取文章中出现的第一个文字段落的信息
          text = tmpStr.match( /(<p class="section txt">).*(\<\/p\>)/i );
          // 获取文章中出现的第一张图片的信息
          img = tmpStr.match( /(<a class="img-wrap").*(\<\/a\>)/i )

          // console.log( text );
          // console.log( img );

          if( text != null && img != null ) {
            if( text.index > img.index ) {//第一张图片出现的位置，小于第一段文字出现的位置，所以先显示图片
              contentType = 'img';
            } else {
              contentType = 'text';
            }
          } else if( text == null && img != null ) {
            contentType = 'img';
          } else if( img == null && text != null ) {
            contentType = 'text';
          } else {
            contentType = null;
          }

          if( contentType == 'text' ) {//文字
            text = tmpStr.match( /(<p class="section txt">).*(\<\/p\>)/i );//获取一段文字内容（对象类型）
            var content = text[ 0 ].substring( text[ 0 ].indexOf( ">" ) + 1, text[ 0 ].lastIndexOf( "</" ) );
            tmpObj.type = 'text';
            tmpObj.content = content;
            arrContent.push( tmpObj );
            tmpStr = tmpStr.substring( text.index + text[ 0 ].length, tmpStr.length );
          } else if( contentType == 'img' ) {//图片
            img = tmpStr.match( /(<a class="img-wrap").*(\<\/a\>)/i )
            // console.log(img);
            // 默认图片类型为jpg
            var imgType = 'jpeg';
            if( img[ 0 ].indexOf( ".jpeg" ) == -1 ) {
              imgType = 'png';
            }
            var content = img[ 0 ].substring( img[ 0 ].indexOf( "http" ), img[ 0 ].indexOf( imgType ) + imgType.length );
            tmpObj.type = 'img';
            tmpObj.content = content;
            arrContent.push( tmpObj );
            index = tmpStr.indexOf( '</figure>' );
            tmpStr = tmpStr.substring( index + 11, tmpStr.length );
          } else {
            doSearch = false;
          }


          if( arrContent.length >= allContentNum ) {
            doSearch = false;
          }

          // console.log( tmpObj );
          // console.log( arrContent );
        }


        var DATA = {
          'title': title,
          'src': srcInfo,
          'item': arrContent
        }

        self.setData( {
          detail: DATA
        });
        setTimeout( function() {
          self.setData( {
            hidden: true
          });
        }, 300 );
      }
    });
 
总结
 
就目前的感受来说，小程序的内容还不是太完善，比如没有webview，不管怎么说还是比较期待后续的版本^_^。
 
 
 
项目地址：https://github.com/xianyanbu/wechat-newsapp
 

 
 
说明：笔者重新规划了博客方向，想更详细的讲解微信小程序的所有技术内容，本文于2020年5月24日已做修改。
 
 
同时笔者也欢迎一起合作共赢，愿意写杂志，写书，贡献自己的一份微薄之力！
 
 

本文原创首发CSDN，链接 https://blog.csdn.net/qq_41464123/article/details/105198163 ，作者博客https://blog.csdn.net/qq_41464123 ，转载请带上本段内容，尤其是脚本之家、码神岛等平台，谢谢配合。
 

作为第二篇的讲解，本文主要讲解 
 
微信小程序好在哪里？
学习微信小程序，需要什么基础？
如何学习微信小程序？
微信小程序的基本架构。

 
 
前言
 
微信小程序作为近几年“微服务”的杰出代表，应用十分广泛。小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
 
说的通俗一些，微信小程序就是微信中非常小巧的程序（这不废话......），我们打开自己手机中的微信，向下一拉，就可以看到小程序列表了。比如“腾讯QQ”这个小程序，我们可以利用它，接收QQ的消息；再入“跳一跳”，“天天象棋”这些小游戏，我们可以利用学习工作之余的短暂空闲时间玩上一把小游戏......那么，为什么微信小程序能够有如此大的发展呢？现在就来谈谈我的看法。
 
笔者曾经在运维微信公众号的时候，发现了小程序的存在，后来就申请了一个，尝试着开发出了第一个属于自己的小程序。从无到有，再到现在的实战开发，虽然敲的代码都是套模板，思路也很暴力，但平时还是会积累很多小程序相关的实践经验和做一些基于微信小程序的开源项目，所以说总结微信小程序的项目经验，我觉得是我最好的成长，也希望给今年想接触微信小程序或者想从事微信小程序工作的朋友带来一些经验和思考。
 

 
 
一：小程序优势有哪些？
 
 
 
1.几乎不占用手机内存
 
如果你的电脑是低配的话，那么你就必须要合理取舍安装的软件。笔者曾经拿学校机房的电脑做过简单实验，我给电脑安装若干杀毒软件，然后同时开始体检、木马扫描操作。实验结论：只需两个杀毒软件同时体检、杀毒操作就会导致死机，2分钟内鼠标键盘无响应且电脑无法正常工作；四个杀毒软件同时体检，电脑大概率蓝屏。
 
电脑为什么会死机，会蓝屏？就是因为电脑资源耗尽。同理，你如果给自己的手机装上几十个APP，效果可想而知。微信小程序几乎不占用系统内存，能给用户，尤其是低配手机用户一个良好的体验。
 
 
 
2.无需安装，用完即走
 
最近因为新型冠状病毒，全国大多数学生都在参与网上教学，这个时候会涉及到很多APP。当然常用的APP，安装在手机，完全没问题，但是那些不常用的、不太需要的如何是好？比如在大学，充饭卡一个APP，冲热水卡一个APP，跑步一个APP，看新闻做题也是一个APP，要请个假也是一个APP，可能还是学校强制要求安装的，大家是否吐槽过这种行为？
 
而微信小程序是建立在微信这个大平台的应用，使用时被打开，使用完毕就消失，而且随时都可被使用，做到了“用时打开，用完即走”。当然小程序还有其他优点，这里不再一一叙述。
 
 
 
继续阅读，你将会了解到这些
 
 
微信小程序需要的基础
 
 
微信小程序优势以及设计思想
 
 
如何学习微信小程序
 
 
微信小程序开发流程
 

 
 
二：学习微信小程序，需要什么基础？
 
阅读本文之前，建议大家最好要有以下基础知识，会写小程序的代码不一定能很好的实现业务需求和功能，要想实现不同项目需求下不同复杂度的逻辑，一定要对以下基础有充足的了解。所以在此希望大家先熟悉一下相关基础知识，好好研究一下。
 
HTML：至少常用的标签要学会使用，比如<button>按钮标签，<text>文本标签，要知道一些标签是干什么用的。
CSS：了解类选择器、标签选择器定义和用法；了解常用的属性，比如height高度,width宽度，font-size字体大小等。
熟练一种编程语言：java/js/c++皆可，这里主要是要熟练变量定义、if条件判断、字符数组。
其他：相对/绝对路径，了解JSON格式，生命周期函数

 
 
三：如何学习小程序？
 
 
 
我个人认为，学习最快的方式就是实践，根据官方文档，多写几个demo是就是学习微信小程序最好的方式。
 
学习前端基础，包括但不限于HTML + CSS + JS + JQ。
学习小程序基础语法，了解小程序基本结构（JS、JSON、WXML、WXSS）。
实战，写项目。
初学者需要注意几点：
 
小程序不像vue那样，修改代码按下保存后，网页上会立刻见效。每一次修改代码后，如需看效果，必须重新编译或者按Ctrl + S 保存，然后等待模拟器重新加载主页，才可查看修改后的效果。
要善于调用模板或者接口，切忌大片自行编程。如果需要实现某个功能，先查询一下官网文档，是否有相应的模板或库。
如果是需要对接数据库的项目，必须在开发前购买服务器，实名认证且备案，小程序开发时间一般少于服务器审核时间（对于小项目来讲），小程序请求的地址必须是已备案的域名。
不要使用传统编程思想来看待小程序开发，小程序不像Java那样可以随心应手的写，其部分功能未必能够实现。

 
 
四：小程序项目的基本文件类型
 
 
 
首先是开发工具！
 
磨刀不误砍材工，要想高效率的开发，必须要熟练使用开发工具（IDE）。下面我们先来了解一下微信小程序的专属开发工具。
 
官网下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
 
 
第一块区域是模拟器区域，是我们代码效果的直接显示，按下CTRL + S 或者编译键，模拟器区域会刷新显示我们的界面。
 
第二块区域是项目结构页面，一个小程序主体部分由三个文件组成，必须放在项目的根目录，分别是：JS（小程序逻辑）、JSON（小程序公共配置）、WXSS（小程序公共样式表）。每个分页面分为JS（页面逻辑）、JSON（页面配置）、WXML（页面结构）、WXSS（页面样式表）四个模块，且描述页面的四个文件必须具有相同的路径与文件名。
 
第三块区域就是我们编写代码的区域，占用了大部分的屏幕。
 
第四块区域是调试区域，小程序可以通过console.log()向控制台输出临时的信息，就相当于C++的cout<<"hello zwz"<<endl; 也相当于Java的syso。这时候这些临时信息会在这个区域显示，方便我们调试程序。
 
第五块区域就是常用的功能模块，这里点击编辑，代码区会自动保存，模拟器会重新加载界面；点击上传代码，会发送到微信公众平台上，然后用于发布小程序。
 

其中第二块区域的项目结构，我们重点介绍
 
第一块：JSON
 
上面提到：每个分页面分为JS（页面逻辑）、JSON（页面配置）、WXML（页面结构）、WXSS（页面样式表）四个模块，那么这些页面分别都有什么用途呢？
 
JSON是页面配置文件，可以对本页面的窗口表现进行配置，文件内容为一个 JSON 对象，会涉及到很多的属性。
 
比如navigationBarTitleText 就是显示在小程序最上方的标题名称。
 
页面中配置项在当前页面会覆盖总的app.json的中相同的配置项。
 
{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "标题zwz",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}
 

第二块：WXML
 
 
 
WXML其实就是HTML，是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
 
比如最常用的双向数据绑定：
 
index.wxml
 
<view class="container">
  {{msg}}
</view>
 
index.js
 
Page({
  data: {
    msg:'hello zwz',
  },
  onLoad: function () {
   
  }
})
 
这样，我们虽然在WXML界面没有直接写文字，但{{msg}}就直接读取到了JS文件的变量值。
 
这时，我们按下CTRL + S（保存，重新编译），我们会发现前台会渲染出  hello zwz。
 
这就是传说中的双向数据绑定，你把JS后台的 hello zwz  改成 hi zwz，那么前台也会显示 hi zwz，以此类推。
 
 
 
同理，如果是数组：
 
在JS页面的Page的data下，加上array变量，作为普通数组
 
array:[1,2,3,4,5,6,7,8,9],
 
接着将WXML界面的msg替换成array，界面则会显示如下：
 
 

本文原创首发CSDN，链接 https://blog.csdn.net/qq_41464123/article/details/105198163 ，作者博客https://blog.csdn.net/qq_41464123 ，转载请带上本段内容，尤其是脚本之家、码神岛等平台，谢谢配合。 
 

第三块：WXSS
 
WXSS和CSS一样，是一套样式语言，用于描述 WXML 的组件样式，WXSS 用来决定 WXML 的组件应该怎么显示。WXSS在实际开发过程中，拥有绝大部分CSS的内容。
 
那么相比CSS而言，WXSS中独有的rpx单位可能会用得到，这个尺度单位可以根据屏幕宽度进行自适应。
 
具体格式如下所示，下面是用了类选择器对WXML中的元素进行样式美化。
 
.title{
  font-size: 30px;
  color: royalblue;
}
.input-placeholder{
  font-size: 16px;
}
.section{
  width: 100%;
  height: 55px;
  box-sizing: border-box;
  padding-top: 15px;
  font-size: 16px;
  display: flex;
}
 

第四块：JS
 
这一块毫无疑问，就是用来存放后端逻辑代码的，我们需要掌握几个常用的生命周期函数，onShow、onLoad。
 
Page({
  data: {
    msg: "hello zwz"
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
})
 
然后就是自定义方法，注意是和onLoad()平级。
 
比如，我们在WXML内定义一个按钮
 
<button bindtap="run">按钮1</button>
 
接着，在JS页面编写响应事件
 
Page({
  data: {
    msg: "hello zwz"
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  run: function() {
    // do some things
  },
})
 
那么，我们在点击这个按钮之后，就会触发run()这个方法。
 
 
 
五：总结
 
总而言之，本文讲解了微信小程序项目的基本架构，以及如何学习微信小程序，以及学习微信小程序所需要的基础，还有前台渲染的基本代码。
 
笔者会出一个微信小程序的专栏，详细讲解微信小程序的常用技术，谢谢朋友们的关注！

 
 
 
 
 
 
 昨日深夜，微信团队推出两条重磅新闻：小程序内可直接打开网页；小程序可关联500个公众号。
 
 面对这两条惊天动地的大新闻，朋友圈的一群大佬儿和开发者一下子就兴奋了起来，笔者也是刚说完“小程序不能跳转H5”马上就得打着脸更新自己的知识了。微信不断地完善小程序的入口和出口，轮子的确越造越好，于是不禁想和大家一起总结一下，我们可以驾驶着小程序这驾小车往哪里走。
 
 首先从字面上的意思，我们来分析下这两条新闻：
 
 “小程序内可以直接打开网页”：我们知道11月2号以前，小程序是独立存在的个体，和H5页面不能互通，小程序只是那个略显孤单的小程序。而现在开发者登录小程序后台配置域名，可以实现小程序直接进入到内嵌网页。当然，与此同时，用户也可以从内嵌网页返回到小程序，这也就类似于打通任督二脉吧。
 至于“小程序可关联500个公众号”，小程序关联公众号需要解释一下，小程序关联公众号后，在公众号关注页面可以直接进入到相关的小程序。如下我们查看“微信公开课”的关注页面，可以在“相关小程序”内容看到“微信公开课小程序”，打开过的内容，在“发现”-“小程序”中显示并置顶。小程序可关联的公众号十倍提升至500个，只需要开发者在公众号管理后台配置即可，大家可以想象一下一下子入口就更加丰富了。
 
 
 
 
 
 
 
 
 
 就以上内容，我们来讨论一下其中的重大意义：
 
 1、从微信的角度来讲
 今天的中国已经是走在移动互联网发展的前端，中国的中小企业对于互联网的心理接受程度高，但是实际经营过程中仅仅在支付环节互联网程度明显（通过“支付宝”，“微信”进行移动交易），而其它的业务场景，例如“商户介绍，地理位置推荐，预约服务，商品管理，评论管理，订单管理，会员管理，消息推送，卡券/促销，物流管理，配送管理”等场景仍有待挖掘，消费升级显然长路漫漫。2017年1月腾讯的微信推出“小程序”，4月阿里的口碑网发布“码战略”，都在力图引导线下流量移动互联网化。我们知道，线下流量是线上流量的3倍之多，线下不缺流量，关键点在于如何通过将线下入口和线上联系起来，用数据和产品为商家赋能。所以，小程序的发展的每一步，无疑是微信征战星辰大海的每一步。
 
 2、从商业模式的角度讲
 最嗨的应该是电商，电商页面比较成熟和有迹可循，很多活动页面，促销页面，折扣页面，节假日专题页面先前通过H5完成开发后嵌入APP，以后同一个页面也可以在小程序中完成H5内嵌，实现H5的重复利用。另外，一个正常的电商APP实际上相对重量级的，在小程序中则不建议过大过重过深，“轻小“为好，因此，电商可以将一些高频，基础，重要的页面，如首页，分类页，详情页等放至小程序，一些“锦上添花”的页面，如视频介绍等通过外链网页实现，保证小程序的轻小。
 
 广告是无处不在的商业变现方式，虽然现在小程序对于域名配置有限制，但是未来开放程度有可能会进一步提高。当前如果想摸索广告模式，首先要做好域名策略。其次，在对内容的选择上，可以借鉴点评，选择有针对性，低频刚需的长尾生活服务类，如美甲，保养，无疑是比较好的选择。
 
 游戏是新思路，在小程序中搜索“游戏”可以发现短短数月，很多小程序游戏已经悄然上线，微信支持小程序内嵌网页后，开发好的游戏可以直接完成嵌入。微信游戏本身也可以通过小程序进行引流，提高下载量。
 内容方面更加丰富，比如各种各样成熟的营销插件可以通过跳转页面完成嵌入，笔者的朋友圈里早在小程序刚发布的时候就有朋友说能做人脸识别，很多有意思的内容需要开发者们群计群策。
 
 3、从开发者角度讲
 毫无疑问，我们上文提到H5可以被重复利用，开发好的页面，穿个小马甲摇身一变小程序，开开心心享受微信红利，开发成本无疑变低。当然，刚做好小程序的开发者接下来的几天有可能要面对老板和产品经理的一系列内嵌网页需求，加油！此外，我们知道小程序提交审核后才能发布，一旦有更改，需要重新提交审核等待发布，而现在可以在小程序外完成内容更新和修改，对于临时更改页面这种需求来说，一下子就轻松搞定，开发效率大大提升。
 
 至此，我们讨论了微信公布的两条重大新闻内容和其产生的一些意义，我们还有很多有待进一步思考的问题，比如：小程序能力进一步开放，是否会导致APP下载弱化？同一企业该如何合理安排APP, 小程序，H5，公众号的内容，做好整合营销？小程序内嵌网页的技术步骤如何进行？欢迎大家和我交流，望共同进步！
 
 原文地址：http://www.woshipm.com/it/836981.html

微信小程序之“无人机新闻”开发文档
 
源码连接
 
https://github.com/LiuGuoXiangIamI/drone-news
 
目录：      开发前的准备；
 
微信小程序前端开发
 
管理网站前端开发
 
数据库设计
 
后端开发
 
前后端交互方法
 
Bug总结
 
总结与不足
 
附录：代码链接
 
开发前的准备
1、选定开发工具：
 
微信开发者工具（安装及配置见微信小程序官方开发文档）；
 
Eclipse；
 
前端+后端选定框架：
前端：html+css+javascript
 
后端：springboot（Eclispe配置Springboot见博客）+mybatis
 
微信小程序前端开发
功能需求与设计：
 
新闻浏览：
功能说明：该功能主要为用户可以浏览新闻列表或者新闻详情页
 
功能设计：
 
①调用后台接口，将数据库中的新闻动态显示在页面中，一是显示在微信小程序的起始页面和新闻列表页面，显示新闻的大致信息（作者信息、发布日期、新闻标题、新闻图片、新闻简介及阅读量和收藏量等信息），二是显示在新闻详情页，我们根据用户选中的新闻获取到其特定序号（NewsID)，传到新闻详情页，调用后台接口从数据库中显示该新闻的完整信息。
 
②用户每点击新闻进入浏览后，该新闻属性中的浏览量实现+1的操作
 
视频浏览
功能说明：该功能主要为用户可以播放相关视频
 
功能设计：
 
调用后端接口，将数据库中的视频获取动态显示在视频页中即可，基本功能与新闻浏览类似
 
新闻编写
功能说明：该功能实现用户可自行在小程序端进行新闻编写
 
功能设计：
 
设计新闻发布的格式，指定用户的填写方式，然后将用户所填写的内容通过后台接口发布到数据库中，并在新闻相关页面中做到显示
 
视频发布
功能说明：该功能实现用户可自行在小程序端进行视频发布
 
功能设计：
 
基本等同新闻编写
 
新闻收藏
功能说明：该功能实现用户在看到喜欢或值得收藏的新闻后，对该新闻进行收藏及后期查看或删除的功能
 
功能设计：
 
①用户点击新闻下方的收藏键，若之前未收藏，则将该新闻通过后台接口发布到数据库中，然后用户在点击收藏页面时，将数据库中的内容显示在界面中，并做到收藏按钮颜色变化的实现
 
②用户取消已收藏的新闻时，将收藏键颜色变化，并从数据库中删除该收藏新闻
 
新闻评论
功能说明：该功能实现用户在浏览新闻后在新闻下方发表自己的评论
 
功能实现：
 
逻辑等同于新闻和视频的发布，针对特定的要对其进行评论的新闻进行
 
圈子功能（用于用户发布一些自己的新鲜活动）
功能说明：用户可发布自己身边的新鲜事和日常生活记录
 
功能实现：
 
与新闻、视频发布等逻辑相同
 
页面设计：
 
起始页
页面预览：
 
 
 
页面元素：
 
①轮播图；②功能按键；③轮播图（公告滚动）；④新闻及视频的图文列表
 
页面所实现功能：
 
新闻浏览；页面跳转；收藏；下拉刷新
 
页面代码：
 
见“微信小程序/pages/index”
 
新闻列表页
页面预览：
 
 
 
页面元素：
 
新闻图文列表
 
页面所实现功能：
 
新闻浏览；收藏
 
页面代码：
 
见“微信小程序/pages/news”
 
视频列表页
页面预览：
 
 
 
页面元素：
 
视频图文列表
 
页面所实现功能：
 
视频播放；收藏
 
页面代码：
 
见“微信小程序/pages/video”
 
新闻详情页
页面预览：
 
 
 
页面元素：
 
新闻属性内容；新闻评论部分；发表评论部分
 
页面所实现功能：
 
新闻浏览；收藏；发表评论
 
页面代码：
 
见“微信小程序/pages/newsPage”
 
新闻编写页
页面预览：
 
 
 
页面元素：
 
新闻属性输入框；“发表新闻”按钮
 
页面所实现功能：
 
编写并发送新闻
 
页面代码：
 
见“微信小程序/pages/writeNews”
 
视频发布页
页面预览：
 
 
 
页面代码：
 
见“微信小程序/pages/sendVideo”
 
“圈子”页
页面预览：
 
 
 
页面元素：
 
导航栏；信息图文列表
 
页面所实现功能：
 
“圈子”浏览；“圈子”发表
 
页面代码：
 
见“微信小程序/pages/circle”
 
用户中心页
页面预览：
 
 
 
页面元素：
 
顶部用户信息；中部功能按键
 
页面所实现功能：
 
获取用户信息；页面跳转
 
页面代码：
 
见“微信小程序/pages/mine”
 
收藏页
页面预览：
 
 
 
页面元素：
 
被收藏新闻视频图文列表
 
页面所实现功能：
 
浏览新闻视频；取消收藏
 
页面代码：
 
见“微信小程序/pages/collectPage”
 
管理网站前端开发
功能需求与设计：
 
功能需求
①管理者登录
 
②管理者注册（不推荐）
 
③新闻管理（主要实现审核与删除功能）
 
④视频管理（主要实现审核与删除功能）
 
功能设计
①管理者登录：
 
提供一种较为安全的登录机制，用户在发送登录请求时，先将用户输入的用户名发给后台，检测是否存在，若存在，在后台端产生随机数并将该随机数返回按一定规则插入到用户所输入的密码中，随后进行md5加密，发给后台，后台进行密码与该随机数的同种处理后进行判断是否相等；在登录界面的前端添加验证码
 
②管理者注册（不推荐）
 
用户填写用户名及密码发到数据库中进行存储
 
③视频与新闻管理（主要实现审核与删除功能）
 
调用后台接口，根据返回的所有新闻及视频的信息在前端利用表格动态显示，并添加删除的功能，并给新闻内容和视频加入链接，方便审核
 
页面设计
 
①管理者登录
 
页面预览：
 
 
 
页面元素：
 
输入框；验证码；登录注册按钮
 
页面所实现功能：
 
获取用户输入信息；动态点击生成验证码及前端验证码判断；登录注册按钮
 
页面代码：
 
见“fly-news/src/main/resources/templates/login.html”
 
②视频与新闻管理
 
页面预览：
 
 
 
 
页面元素：
 
表格；删除按钮；链接
 
页面所实现功能：
 
审核与删除
 
页面代码：
 
见“fly-news/src/main/resources/templates/a.html”
 
③管理者注册
 
页面预览：
 
 
 
页面元素：
 
表单；“注册”按钮；链接
 
页面所实现功能：
 
管理者注册
 
页面代码：
 
见“fly-news/src/main/resources/templates/regist.html”
 
数据库设计
采用工具：mysql+navicat
 
数据库设计：
 
①新闻
 
新闻我们需要给新闻编号，记录新闻发表日期、发表作者信息、新闻简介、新闻内容、新闻浏览量、收藏量、评论等新闻属性
 
②视频
 
等同于新闻
 
③用户
 
用户需要记录用户的特定id、用户所发表的新闻和视频ID、用户所评论的新闻视频ID及评论内容等
 
④管理者
 
管理者需要记录管理者的用户名及密码等信息
 
数据库浏览：
 
 
 
数据库结构：
 
 
 
例：newstable
 
 
 
后端开发
该微信小程序后端采用的是springboot+mybatis
 
项目结构如下：
 
 
 
项目结构说明：
 
pom.xml：项目依赖项等的管理（maven库）
 
FlyNewsApplication：项目启动项
 
News等：新闻类等
 
UserMapper：由于本人并不是很了解springboot的原理，本人感觉该层是对sql语句的外部封装
 
UserService：本人感觉为对UserMapper的进一步封装
 
UserServiceImpl：对UserService的重写
 
UserController：提供与前端交互的封装
 
application.yml：与数据库连接等的配置
 
UserMapper.xml：sql语句的内部封装
 
后端接口所提供的功能：
 
查询所有新闻视频；查询单条新闻视频；删除单条新闻视频；用户上传新闻视频；用户上传评论；查询视频新闻数量；收藏新闻；判断管理者登录；注册管理者信息；收藏新闻
 
UserController预览：
 
 
 
UserMapper.xml预览：
 
 
 
其他具体代码见“fly-news”
 
前后端交互方法
①微信端与后台交互
 
采用wx.request()
 
示例：
 
 
 
若方法为“POST”，则header内容应改为：'content-type': 'application/x-www-form-urlencoded',
 
②管理网页端与后台交互
 
在本项目中采用了两种方式，一为xmlHttpRequest，而为ajax
 
示例如下：
 
xmlHttpRequest
 
 
 
ajax
 
 
 
Bug总结
微信端常碰到undefined问题，往往是调用数据时没有使用this.setData或者此时this应改为that
spring boot中@RequestMapping注解，这个注解会将 HTTP 请求映射到 MVC 和 REST 控制器的处理方法上，你可以将多个请求映射到一个方法上去，只需要添加一个带有请求路径值列表的 @RequestMapping 注解就行了。例如

 
Spring MVC 的 @RequestMapping 注解能够处理 HTTP 请求的方法, 比如 GET, PUT, POST, DELETE 以及 PATCH。所有的请求默认都会是 HTTP GET 类型的。为了能将一个请求映射到一个特定的 HTTP 方法，你需要在 @RequestMapping 中使用 method 来声明 HTTP 请求所使用的方法类型。
 
在springboot开发中，我使用了mybatis（MyBatis 是一款优秀的持久层框架，它支持定制化 SQL、存储过程以及高级映射），这里就存在了jdbcType与java类型的转化问题了，例如
具体对应关系见博客：https://blog.csdn.net/haofeng82/article/details/34857991
 
一开始我是在localhost的另一个端口下的服务器上配置的管理网站（vs code提供的live server服务器插件）结果发生了跨域的问题，导致不能访问，然后我放弃了vs code，转而将网站利用thymeleaf的jar包，然后配置了application.yml，将网站放在了fly-news/src/main/resources/templates/的下面，然后就可以了，不过跨域问题的话可能采用代理设置可以解决。
Springboot注解中@Controller和@RestController的区别，@RestController注解相当于@ResponseBody ＋ @Controller合在一起的作用。
如果只是使用@RestController注解Controller，则Controller中的方法无法返回jsp页面，或者html，配置的视图解析器 InternalResourceViewResolver不起作用，返回的内容就是Return 里的内容。
如果需要返回到指定页面，则需要用 @Controller配合视图解析器InternalResourceViewResolver才行。
示例：
 
 
 
返回数据
 
    返回html
 
数据库中两列字段的拼接方法
 
MySQL数据库表的主键ID乱了，重新+1排列(用在删除某一项内容后的主键重排序)
 
springboot之Request header is too large问题，这是因为tomcat限制了header的长度，在springboot中，由于tomcat内置，所以我们在application.yml加入

即可
 
9、springboot之Invalid character found in the request target.he valid characters are defined in RFC 7230 and RFC 3986错误，这个是因为springboot内置的tomcat有对特殊字符的限制
 
总结与不足
通过制作本微信小程序，我学会了springboot的使用和前端制作以及前端与后台交互的方式，并学会使用了数据库，为以后的项目打下了基础。
 
不足之处在于小程序很多地方并不完善，功能过于单一和简陋，用户逻辑欠缺考虑等。
 
附录：源码连接
 
https://github.com/LiuGuoXiangIamI/drone-news