add page shared function & mpvue frequently asked questions

README.md

@@ -37,8 +37,6 @@ npm run build --report
 For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
 
 
-
-
 ### server
 使用koa开发  
 ```
@@ -47,6 +45,24 @@ npm run dev
 ```
 > server目录下config中需要填写小程序配置信息Appid & App Secret 等（注： 项目放github上App Secret明文显示 会收到腾讯云短信提醒该泄露，安全隐患）
 
+### mpvue  [官方文档常见问题](http://mpvue.com/mpvue/#_18)
+1.新增页面需要npm run dev重启一下。
+
+2.小程序里所有的 BOM／DOM 都不能用，也就是说 v-html 指令不能用。
+
+3.暂不支持在组件上使用 Class 与 Style 绑定，需要在组件内部书写。
+
+4.mpvue 可以支持小程序的原生组件，比如： picker,map 等，需要注意的是原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 `bindchange="eventName" `事件，需要写成 `@change="eventName"`。
+
+5.mpvue 建议使用` v-model.lazy `绑定方式以优化性能，此外 v-model 在老基础库下输入框输入时可能存在光标重设的问题。 
+
+6.写页面跳转时候传入动态参数，需要写成:url，如：`<navigator url=" '../test/main?id='+ id hover-class="none""`。
+
+7.通过 `this.$root.$mp.query `进行获取小程序在 page onLoad 时候传递的 options。通过 `this.$root.$mp.appOptions` 进行获取小程序在 app onLaunch/onShow 时候传递的 options。
+
+8. 页面跳转和传参(这里mpvue不支持vue-router)  使用微信的页面跳转方法，然后跳转页面使用`this.$root.$mp.query`获取参数。    注：使用`this.$root.$mp.query`获取参数需要在monted中获取，在created中会报Cannot read property 'query' of undefined 。
+
+
 ### mysql语句
 
 Mysql 基本语法

server/controllers/bookdetail.js

@@ -3,12 +3,19 @@ const {mysql} = require('../qcloud')
 module.exports = async (ctx) => {
   const {id} = ctx.request.query
   const detail = await mysql('books')
-                       .select()
+                       .select('books.*', 'cSessionInfo.user_info')
+                       .join('cSessionInfo', 'books.openid', 'cSessionInfo.open_id')
                        .where('id', id)
                        .first()
 
   // console.log(detail)
-  ctx.state.data = detail
+  const info = JSON.parse(detail.user_info)
+  ctx.state.data = Object.assign({}, detail, {
+    user_info: {
+      name: info.nickName,
+      image: info.avatarUrl
+    }
+  })
 
   // 浏览量+1
   await mysql('books')

src/components/BookInfo.vue

@@ -16,15 +16,54 @@
         </div>
       </div>
     </div>
+    <div class="owner detail">
+        <img class="avatar" 
+            :src="userinfo.image"
+            mode="aspectFit">
+           <!-- 添加人 -->
+           {{userinfo.name}}
+        <div class="right text-primary">
+          {{info.rate}}分
+          <Rate :value="info.rate"></Rate>
+        </div>
+      </div>
+      <div class="detail">
+        {{info.publisher}}
+        <div class="right">
+          {{info.price}}
+        </div>
+      </div>
   </div>
 </template>
 <script>
+import Rate from '@/components/Rate'
 export default {
-  props: ['info']
+  components: {
+    Rate
+  },
+  props: ['info'],
+  computed: {
+    userinfo() {
+      return this.info.user_info || {};
+    }
+  }
 }
 </script>
 <style lang="scss">
 .bookinfo {
+  font-size: 14px;
+  .right {
+    float: right;
+  }
+  .detail {
+    padding: 5px 10px;
+    .avatar {
+      width: 40rpx;
+      height: 40rpx;
+      border-radius: 50%;
+      vertical-align: middle;
+    }
+  }
   .thumb {
     width: 750rpx;
     height: 450rpx;

src/pages/detail/Detail.vue

@@ -2,6 +2,7 @@
   <div>
     <!-- 图书id{{bookid}} -->
     <BookInfo :info='info'></BookInfo>
+    <!-- <button open-type='share' class="btn">转发给好友</button> -->
   </div>
 </template>
 <script>
@@ -25,11 +26,34 @@ export default {
       })
       console.log(info)
       this.info = info
-    }
+    },
   },
+  onShareAppMessage: function(res) {
+    return {
+      title: this.info.title,
+      path: 'pages/detail/main',
+      imageUrl:'',  // 不填写默认页面截图
+      // success: function (shareTickets) {
+      //   // console.info(shareTickets + '成功');
+      //   console.log(shareTickets + '成功');
+      //   // 转发成功
+      // },
+      // fail: function (res) {
+      //   console.log(res + '失败');
+      //   // 转发失败
+      // },
+      // complete:function(res){
+      //   console.log(res + '不管成功失败都会执行');
+      //   // 不管成功失败都会执行
+      // }
+    }
+	},
   mounted () {
-    this.bookid = this.$root.$mp.query.id
-    this.getDetail()
+    this.bookid = this.$root.$mp.query.id;  // 跳转页面使用this.$root.$mp.query获取参数
+    this.getDetail();
+    // wx.showShareMenu({
+    //   withShareTicket: true
+    // });
   }
 }
 </script>