1. 程式人生 > >小程式--引用外部js方法

小程式--引用外部js方法

1、外部檔案 /util/util.js

function convertToStarsArray(stars) {  //把星級存到陣列中  
  var num = stars.toString().substring(0, 1);
  var array = [];
  for (var i = 1; i <= 5; i++) {
    if (i <= num) {
      array.push(1);
    }
    else {
      array.push(0);
    }
  }
  return array;
}

module.exports = {
  convertToStarsArray: convertToStarsArray
}

2、pages/movies/movies.wxml

var util = require('../../utils/util.js')
...
 processDoubanData: function (moviesDouban, settedKey, categoryTitle){
  var movies=[];//定義陣列儲存處理資料的容器
  for (var idx in moviesDouban.subjects) {
      var subject = moviesDouban.subjects[idx];
      //文章標題
      var title = subject.title;
      if (title.length >= 6) {
        title = title.substring(0, 6) + "...";//擷取文章前六個字
      }
      var temp = { //所有資料放到temp中
        stars: util.convertToStarsArray(subject.rating.stars),
title: title, average: subject.rating.average, coverageUrl: subject.images.large, movieId: subject.id } movies.push(temp) //所有資料儲存到movies中 var readyData = {}; readyData[settedKey] = { categoryTitle: categoryTitle, movies: movies } this.setData(readyData); } }

3、星級評分思路:把分數轉換為陣列 如共5星 若有3星 則陣列為[1,1,0]

    wxml檔案使用wx.if進行判斷並顯示

<view class="stars">
        <block wx:for="{{stars}}" wx:for-item="i">
              <image wx:if="{{i}}" src="/images/icon/star.png"></image>
              <image wx:else src="/images/icon/none-star.png"></image>
        </block>
     </view>

注意:data傳值新方法 (movie傳star)

<template is="starsTemplate" data="{{stars:stars, score: average}}"/>

相關推薦

程式--引用外部js方法

1、外部檔案 /util/util.jsfunction convertToStarsArray(stars) { //把星級存到陣列中 var num = stars.toString().substring(0, 1); var array = [];

微信程式 引用其他js裡的方法

微信小程式中,在微信官方開發文件我們可以知道 小程式的目錄結構 。 一個小程式頁面由四個檔案組成,一個小程式頁面的四個檔案具有相同路徑與檔名,由此我們可知一個小程式頁面對應著一個跟頁面同名的js檔案。可是當有些公共方法,我們想抽離出來成為一個獨立公共的js檔案。我們該如何

微信程式引用同一js檔案中的方法函式(function)

在小程式的js檔案中,有時候我們也要複用同一js的一個或多個方法。如下即可 /** * 生命週期函式–監聽頁面顯示 */ onShow: function (options) { var that=this; that.q

微信程式引用外部字型

微信小程式如何引入外部字型庫 微信小程式的霸權主義, 不識別很多檔案, 其中就包括外部的字型檔案. 那我們怎麼突破他的防火線呢, 這裡主要用得就是線上的字型庫. 它的使用不像之前引用阿里巴巴字型庫那樣簡單, 有一點不同. 步驟如下: 1.在 阿里巴巴字型

微信程序引用外部js

微信 程序 js文件 必須 option onload 訪問 UNC 建立 1、先建立一個common.js, 寫我們的外部js   比如: common.js   function getTime(){ //下面寫我們的代碼 .... }

【微信程式】在js中匯入第三方js或自己寫的js,使用外部js中的function的兩種方法 import和require的區別使用方法

如下 定義了一個外部js檔案,其中有一個function import lunaCommon from '../lunaCommon.js'; var ctx = wx.getStorageSync("ctx"); var filter = "/ms-code"; var apis

初次使用引用外部js心得

外部 是我 2-2 ima 出現 logs -1 在外 初學 在外部引用自己編輯的js時建立鏈接寫在頭部中是會出錯的,如下圖 錯誤如下: 這是一個是我初學時遇到的一個算是低級錯誤吧,看到這個錯誤,我以為的是我引用的js中編輯的代碼是不是哪裏寫錯了,但是看了好多遍代碼沒有

程式】開發 JS知識總結

JS知識總結 js判斷字元是否為空的方法: //判斷字元是否為空的方法 function isEmpty(obj){ if(typeof obj == "undefined" || obj == null || obj == ""){ ret

程式頁面跳轉方法

需求:從 index.wxml 頁面,跳轉到 log.wxml 頁面 方法一:WXML頁面實現 <navigator url = "/pages/log/log">跳轉到新頁面</navigator> <navigator url = "/pages/log

程式如何寫公共方法

1.子頁面使用app.js的公共方法 const app = getApp(); Page({ data: { }, // 掃一掃 scan: function(){ app.scan(); }, }) 2.app.js中寫公共方法 //app.js Ap

抽獎程式(基於js

幫同事準備生日會,生日會上有抽獎環節,本意上做個小程式來抽取幸運兒,結果應用到最多的是各種遊戲環節,由於理工科的男生女生都是靦腆型的,沒有人積極主動參與,因此也用來抽取員工上臺參與遊戲。 要求實現功能如下:1.隨機抽取任一員工;2.如果該員工此次生日會被抽到參與過遊戲,

HTML中引用外部JS檔案失效原因

今天在練習中碰到“引用外部的一個js檔案但是卻失效”的情況,實在不懂,百度後才知是引用的位置不對,錯誤的程式碼如下: <head> <meta charset="UTF-8"> <title>Day16</title> <s

angular4+ 引用外部js檔案,使用第三方js外掛

1.在tsconfig.json檔案裡找到compilerOptions屬性,在屬性裡面加個 “allowJs”: true。 2.將你的外部js檔案放到assets資料夾裡,找到 angular.json檔案,找到scripts配置js檔案路徑。 3.在src目錄下新建個檔案typin

【微信程式】app.js配置

App()函式用來註冊一個小程式。接受一個object引數,其指定小程式的生命週期函式等。 object引數: 屬性 型別 描述 觸發時機 onLaunch Function 生命週期函式--監聽小程式初始化 當小程式初始化完成時,

微信程式頁面跳轉方法總結

微信小程式頁面跳轉目前有以下方法(不全面的歡迎補充): 1. 利用小程式提供的 API 跳轉: // 保留當前頁面,跳轉到應用內的某個頁面,使用wx.navigateBack可以返回到原頁面。 //

使用Promise對微信程式wx.request請求方法進行封裝,配有詳細過程

採用Promise的方式來封裝而不採用回撥函式(callBack)的方式封裝的主要好處是防止回撥地獄等。。。 主要分為四個部分: 1、config.js檔案,主要存放小程式的配置,例如請求的伺服器地址 const config = { api_base_url:

微信程式引用fontawesome字型

2017年05月05日 17:04:12 yiyingcsdn 閱讀數:11805 標籤: css 微信

微信程式引用iconfont-實測版

1.H5引用圖示庫的方式為URL引入,但是在小程式中不支援 URL方式,需要使用base64方式直接引入@font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?

微信程式 tabbar onshow裡方法不觸發問題

 不知道是不是tabbar有這種情況, 在tabbar裡定義類似不會被觸發。 檢查了一圈發現, 好像只有在onload裡引用過的同名方法,才會在onshow裡被觸發到。   不知道具體原因是不是這個, 反正我這麼做了之後onshow裡是可以呼叫到的了。。

微信程式引用騰訊視訊

文章轉自 https://www.jiezhe.net/post/38.htmltips:騰訊視訊上傳需要認證,上傳身份證圖片時如果報錯,就換個QQ號,我一個QQ號能上傳,另一個QQ號就不行,應該是有什麼限制,騰訊具體沒說===========================