李跃崑 發表於 2019-8-5 15:36:00

小程序·云开发实战 - 体重记录小程序

<p>前一段看到朋友圈里总是有人用txt记录体重，就特别想写一个记录体重的小程序， 现在小程序的云开发有云函数、数据库，真的挺好用，很适合个人开发者，服务器域名什么都不用管，云开发让你完全不用操心这些东西。</p>
<p><strong>先看看页面效果图吧：</strong></p>
<p><img src="https://puui.qpic.cn/vupload/0/20190801_1564627993758_gx1ucl1mgcf./0"><br>
<img src="https://puui.qpic.cn/vupload/0/20190801_1564628011137_e5zkj4g46a./0"><br>
<img src="https://puui.qpic.cn/vupload/0/20190801_1564628020742_j4sifexrbrm./0"><br>
<img src="https://puui.qpic.cn/vupload/0/20190801_1564628029557_tdee5267t7o./0"><br>
<img src="https://puui.qpic.cn/vupload/0/20190801_1564628038618_rhamcbies8./0"><br>
<img src="https://puui.qpic.cn/vupload/0/20190801_1564628047697_rw9ildx018j./0"><br>
<img src="https://puui.qpic.cn/vupload/0/20190801_1564628080320_nxcdbw1d1y./0"></p>
<p>记录的几个点：</p>
<p>1.全局变量 globalData</p>
<p>2.npm 的使用</p>
<p>3.云函数</p>
<p>4.数据库操作</p>
<p>5.async 的使用</p>
<p>6.分享的配置</p>
<p>7.antV使用</p>
<p>8.tabBar地址跳转</p>
<p>9.切换页面刷新</p>
<h3 id="1全局变量-globaldata">1.全局变量 globalData</h3>
<p>首次进入后，要存储openId给其他页面使用，使用globalData共享。</p>
<pre><code class="language-javascript">&lt;!--app.js 设置 globalData.openid --&gt;
App({
onLaunch: function () {

    this.globalData = {}

    wx.cloud.init({})

    wx.cloud.callFunction({
      name: 'login',
      data: {},
      success: res =&gt; {
      this.globalData.openid = res.result.openid
      wx.switchTab({
          url: '/pages/add/add',
          fail: function(e) {}
      })
      },
      fail: err =&gt; {
   
      }
    })

}
})

&lt;!--其他页面引用--&gt;
const app = getApp()// 获得实例
app.globalData.openid // 直接引用即可
</code></pre>
<h3 id="2npm-的使用">2.npm 的使用</h3>
<p>1.进入小程序源码<code> miniprogram</code> 目录，创建 <code>package.json</code> 文件（使用 <code>npm init</code> 一路回车）</p>
<p>2.<code>npm i --save</code> 我们要安装的 <code>npm</code> 包</p>
<p>3.设置微信开发者工具 构建 <code>npm</code></p>
<p>4.<code>package.json</code> 增加 <code>"miniprogram": "dist"</code> 打包目录字段，如果不设置的话上传和预览不成功，提示文件包过大。</p>
<pre><code class="language-javascript">cd miniprogram
npm init
npm i @antv/f2-canvas --save   // 我用到了f2，可以换成其他包
</code></pre>
<p><strong>设置微信开发者工具</strong></p>
<p><img src="https://puui.qpic.cn/vupload/0/20190801_1564628449211_mosinmptvtm./0"></p>
<p>构建 <code>npm</code></p>
<p><img src="https://puui.qpic.cn/vupload/0/20190801_1564628496293_9yqvham5g05./0"></p>
<p>最后，务必添加 <code>miniprogram</code> 字段</p>
<pre><code class="language-javascript">{
"name": "21Day",
"version": "1.1.0",
"miniprogram": "dist",
"description": "一个21天体重记录的app",
"license": "MIT",
"dependencies": {
    "@antv/f2-canvas": "~1.0.5",
    "@antv/wx-f2": "~1.1.4"
},
"devDependencies": {}
}
</code></pre>
<h3 id="3云函数">3.云函数</h3>
<p>官方解释 <code>云函数即在云端（服务器端）运行的函数</code> ，服务端是 <code>node.js</code> ，都是 <code>JavaScript</code> 。官方有数据库的操作，但是<strong>更新的操作强制要求使用云函数</strong>, 另外，如果云函数中使用了 <code>npm</code> 包，记得在所在云函数文件夹右键<strong>上传并部署</strong>，不然运行失败。</p>
<p><img src="https://puui.qpic.cn/vupload/0/20190801_1564628676367_kakijcuofj./0"></p>
<p>上一个例子，更新体重的云函数</p>
<pre><code class="language-javascript">// 云函数
const cloud = require('wx-server-sdk')
const moment = require('moment')

cloud.init(
{ traceUser: true }
)

const db = cloud.database()
const wxContext = cloud.getWXContext()

exports.main = async (event, context) =&gt; {
// event 入参参数
delete event.userInfo
try {
    return await db.collection('list').where({
      _openid:wxContext.OPENID,
      date:moment().format('YYYY-MM-DD')
    })
    .update({
      data: {
              ...event
      },
    })
} catch(e) {
    console.error(e)
}
}
</code></pre>
<p>小程序端调用</p>
<pre><code class="language-javascript">wx.cloud.callFunction({
   name: 'add',
   data: {
      ...Param
   },
   success: res =&gt; {
      wx.showToast({
          title: '新增记录成功',
      })
   },
   fail: err =&gt; {
      wx.showToast({
          icon: 'none',
          title: '新增记录失败'
      })
   }
   })
</code></pre>
<h3 id="4数据库操作">4.数据库操作</h3>
<p>其实是接入的 <code>MongoDB</code> ，封装了一部分 <code>api</code> 出来，详细的就看官方文档吧，有区分服务端和小程序段。</p>
<pre><code class="language-javascript">const db = wx.cloud.database()

// 查询数据
db.collection('list').where({
    _openid: app.globalData.openid,
    date: moment().subtract(1, 'days').format('YYYY-MM-DD'),
}).get({
    success: function (res) {
      // do someThing
    }
})
</code></pre>
<h3 id="5async-的使用">5.async 的使用</h3>
<p><img src="https://puui.qpic.cn/vupload/0/20190801_1564628955577_1t7h763knxz./0"></p>
<p>官方文档提示不支持 <code>async</code>，需要引入 <code>regeneratorRuntime</code> 这个包，先 <code>npm i regenerator</code> 。<br>
然后把 <code>node_modules</code> 文件夹下的 <code>regenerator-runtime</code> 的 <code>runtime-module.js</code> 和 <code>runtime.js</code> 两个文件拷贝到lib目录下，在页面上引入即可。</p>
<pre><code class="language-javascript">&lt;!--事例--&gt;
const regeneratorRuntime = require('../../lib/runtime.js')
onLoad: async function (options) {

    // 获取当天数据
    await this.step1()

    // 时间类型设置
    let nowHour = moment().hour(),timeType
    nowHour &gt; 12 ? timeType = 'evening' : timeType = 'morning'
    this.setData({timeType})
}
</code></pre>
<h3 id="6分享的配置">6.分享的配置</h3>
<p>分享很简单，有区分右上角的直接分享和点击按钮分享</p>
<pre><code class="language-javascript">onShareAppMessage: function (res) {
      
      // 右上角分享
      let ShareOption = {
      title: '21天体重减肥记录',
      path: '/pages/index/index',
      }
      
      // 按钮分享
      if(res.from == "button"){
      ShareOption = {
            title: '来呀 看看我的减肥记录呀',
            path: '/pages/detail/detail?item=' + app.globalData.openid,
          }
      }
      
      return ShareOption
}
</code></pre>
<p>分享后，他人点击页面，跳转到对应 <code>pages</code> 地址，从 <code>onLoad</code> 的 <code>options </code>中拿入参请求数即可</p>
<pre><code class="language-javascript">onLoad: function (options) {
    const db = wx.cloud.database()
    let This = this
    let resault = {}
    db.collection('list').where({
      _openid: options.item
    }).get({
      success: function (res) {
      resault = res.data
      This.setData({
          resault:resault
      })

      }
    })
},
</code></pre>
<h3 id="7antv使用">7.antV使用</h3>
<p>上边第二小节有提到 <code>antV</code> 的安装，就不再赘述，直接说一下再页面中引用。</p>
<p>说下使用，需要设置一个全局变量储存图表的实例，然后在钩子函数内容使用 <code>changeData</code> 方法修改数据。</p>
<p><code>index.json</code> 中引入包名</p>
<pre><code class="language-javascript">{
"usingComponents": {
        "ff-canvas": "@antv/f2-canvas"
}
}
</code></pre>
<pre><code class="language-javascript">// 引入F2
import F2 from '@antv/wx-f2';

// 设置实例全局变量（务必）
let chart = null;
function initChart(canvas, width, height, F2) { // 使用 F2 绘制图表
let data = [
    // { timestamp: '1951 年', step: 38 },
];

chart = new F2.Chart({
    el: canvas,
    width,
    height
});

chart.source(data, {
    step: {
      tickCount: 5
    },
    timestamp: {
      tickCount: 8
    },

});


chart.axis('timestamp', {
    label(text, index, total) {
      const textCfg = {};
      if (index === 0) {
      textCfg.textAlign = 'left';
      }
      if (index === total - 1) {
      textCfg.textAlign = 'right';
      }
      return textCfg;
    }
});

chart.axis('step', {
    label(text) {
      return {
      text: text / 1000 + 'k步'
      };
    }
});

chart.tooltip({
    showItemMarker: false,
    onShow(ev) {
      const { items } = ev;
      items.name = null;
      items.name = items.title;
      items.value = items.value + '步';
    }
});
chart.area().position('timestamp*step').shape('smooth').color('l(0) 0:#F2C587 0.5:#ED7973 1:#8659AF');
chart.line().position('timestamp*step').shape('smooth').color('l(0) 0:#F2C587 0.5:#ED7973 1:#8659AF');
chart.render();
return chart;
}

// 生命周期函数
onLoad(){
    // 使用changeData赋值
    chart.changeData(stepInfoList)
}
</code></pre>
<h3 id="8tabbar地址跳转">8.tabBar地址跳转</h3>
<p>如果要跳转的地址不在 <code>app.json</code> 的 <code>tabBar</code> 内可以使用 <code>wx.navigateTo</code> ，如果在死活跳不过去，要使用<code> wx.switchTab</code> 方法跳转。</p>
<pre><code class="language-javascript">wx.switchTab({
url: '/pages/add/add',
fail: function(e) {}
})

wx.navigateTo({
url: '../deployFunctions/deployFunctions',
})
</code></pre>
<h3 id="9切换页面刷新">9.切换页面刷新</h3>
<p>切换几个tabBar的时候，需要刷新数据。 在 <code>onShow</code> 方法中再调用一下 <code>onLoad</code> 方法就可以了。</p>
<pre><code class="language-javascript">onShow: function () {
    this.onLoad()
}
</code></pre>
<h1 id="源码链接">源码链接</h1>
<p>https://github.com/TencentCloudBase/Good-practice-tutorial-recommended</p>
<hr>
<p>云开发（CloudBase）是一款云端一体化的产品方案 ，采用 serverless 架构，免环境搭建等运维事务 ，支持一云多端，助力快速构建小程序、Web应用、移动应用。</p>
<p>技术文档：https://www.cloudbase.net/</p>
<p>如果你有关于使用云开发CloudBase相关的技术故事/技术实战经验想要跟大家分享，欢迎留言联系我们哦~比心！</p>
<p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9rbkhKUTZycDJJdTRqREU0Y1BzaWIxdEJvbTVCUWpyMFppYTJ6M21mUkpoVFppYmljdjFydFVHVTdZeWN3SXZYdUJPY3o3a3htaWNBVWhZUGlhdWljeERpYjQycllnLzA#pic_center"></p><br><br>
来源：https://www.cnblogs.com/CloudBase/p/11303340.html
頁: [1]
查看完整版本: 小程序&#183;云开发实战 - 体重记录小程序